<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>Compositing and Blending Level 1</title>
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <meta content="refining" name="csswg-work-status">
  <meta content="ED" name="w3c-status">
  <meta content="Compositing describes how shapes of different elements are combined into a single image. There are various possible approaches for compositing. Previous versions of SVG and CSS used <a href=&quot;https://www.w3.org/TR/SVG11/masking.html#SimpleAlphaBlending&quot;>Simple Alpha Compositing</a>. In this model, each element is rendered into its own buffer and is then merged with its <a>backdrop</a> using the Porter Duff &apos;&apos;source-over&apos;&apos; operator. This specification will define a new compositing model that expands upon the Simple Alpha Compositing model by offering:  <ul><li>additional Porter Duff compositing operators</li><li>advanced blending modes which allow control of how colors mix in the areas where shapes overlap</li><li>compositing groups</li></ul>  In addition, this specification will define CSS properties for blending and group isolation and the properties of the {{globalCompositeOperation}} attribute." name="abstract">
  <link href="../default.css" rel="stylesheet" type="text/css">
  <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon">
  <link href="https://www.w3.org/StyleSheets/TR/2016/W3C-ED" rel="stylesheet" type="text/css">
  <link href="https://www.w3.org/TR/compositing-1/" rel="canonical">
<script defer src="https://test.csswg.org/harness/annotate.js#!compositing-1_dev/compositing-1" type="text/javascript"></script>
<style type="text/css">
a[data-link-type=element]::before,span[data-link-type=element]::before {
  content: '<';
}
a[data-link-type=element]::after,span[data-link-type=element]::after {
  content: '>';
}
</style>
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"><a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" width="72"> </a> </p>
   <h1>Compositing and Blending Level 1</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <div data-fill-with="spec-metadata">
    <dl>
     <dt>This version:
     <dd><a class="u-url" href="https://drafts.fxtf.org/compositing-1/">https://drafts.fxtf.org/compositing-1/</a>
     <dt>Latest published version:
     <dd><a href="https://www.w3.org/TR/compositing-1/">https://www.w3.org/TR/compositing-1/</a>
     <dt>Previous Versions:
     <dd><a href="https://www.w3.org/TR/2015/CR-compositing-1-20150113/" rel="prev">https://www.w3.org/TR/2015/CR-compositing-1-20150113/</a>
     <dd><a href="https://www.w3.org/TR/2014/CR-compositing-1-20140220/" rel="prev">https://www.w3.org/TR/2014/CR-compositing-1-20140220/</a>
     <dt>Test Suite:
     <dd><a href="http://test.csswg.org/suites/compositing-1_dev/nightly-unstable/">http://test.csswg.org/suites/compositing-1_dev/nightly-unstable/</a>
     <dt class="editor">Editors:
     <dd class="editor p-author h-card vcard" data-editor-id="106988"><a class="p-name fn u-email email" href="mailto:cabanier@adobe.com">Rik Cabanier</a> (<span class="p-org org">Adobe Systems Inc.</span>)
     <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:Nikos.Andronikos@cisra.canon.com.au">Nikos Andronikos</a> (<span class="p-org org">Canon Information Systems Research Australia</span>)
     <dd class="editor p-author h-card vcard" data-editor-id="90243"><a class="p-name fn u-email email" href="mailto:chrishtr@chromium.org">Chris Harrelson</a> (<span class="p-org org">Google Inc.</span>)
     <dt>Suggest an Edit for this Spec:
     <dd><a href="https://github.com/w3c/fxtf-drafts/blob/master/compositing-1/Overview.bs">GitHub Editor</a>
     <dt>Issue Tracking:
     <dd><a href="https://github.com/w3c/fxtf-drafts/labels/compositing-1">GitHub Issues</a>
    </dl>
   </div>
   <div data-fill-with="warning"></div>
   <p class="copyright" data-fill-with="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 1970 <a href="https://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="https://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="https://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="https://www.keio.ac.jp/">Keio</a>, <a href="https://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document">permissive document license</a> rules apply. </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>Compositing describes how shapes of different elements are combined into a single image. There are various possible approaches for compositing. Previous versions of SVG and CSS used <a href="https://www.w3.org/TR/SVG11/masking.html#SimpleAlphaBlending">Simple Alpha Compositing</a>. In this model, each element is rendered into its own buffer and is then merged with its <a data-link-type="dfn" href="#backdrop" id="ref-for-backdrop">backdrop</a> using the Porter Duff <span class="css">source-over</span> operator. This specification will define a new compositing model that expands upon the Simple Alpha Compositing model by offering:</p>
   <ul>
    <li>additional Porter Duff compositing operators
    <li>advanced blending modes which allow control of how colors mix in the areas where shapes overlap
    <li>compositing groups
   </ul>
    In addition, this specification will define CSS properties for blending and group isolation and the properties of the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-globalcompositeoperation" id="ref-for-dom-context-2d-globalcompositeoperation">globalCompositeOperation</a></code> attribute. 
  </div>
  <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>
  <div data-fill-with="status">
   <p> This is a public copy of the editors’ draft.
	It is provided for discussion only and may change at any moment.
	Its publication here does not imply endorsement of its contents by W3C.
	Don’t cite this document other than as work in progress. </p>
   <p> <a href="https://github.com/w3c/fxtf-drafts/issues">GitHub Issues</a> are preferred for discussion of this specification.
	When filing an issue, please put the text “compositing” in the title,
	preferably like this:
	“[compositing] <i data-lt>…summary of comment…</i>”.
	All issues and comments are <a href="https://lists.w3.org/Archives/Public/public-fxtf-archive/">archived</a>,
	and there is also a <a href="http://lists.w3.org/Archives/Public/public-fx/">historical archive</a>. </p>
   <p> This document was produced by the <a href="https://www.w3.org/Style/CSS/">CSS Working Group</a> (part of the <a href="https://www.w3.org/Style/">Style Activity</a>). </p>
   <p> This document was produced by a group operating under
	the <a href="https://www.w3.org/Consortium/Patent-Policy/">W3C Patent Policy</a>.
	W3C maintains a <a href="https://www.w3.org/2004/01/pp-impl/32061/status" rel="disclosure">public list of any patent disclosures</a> made in connection with the deliverables of the group;
	that page also includes instructions for disclosing a patent.
	An individual who has actual knowledge of a patent which the individual believes contains <a href="https://www.w3.org/Consortium/Patent-Policy/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="https://www.w3.org/Consortium/Patent-Policy/#sec-Disclosure">section 6 of the W3C Patent Policy</a>. </p>
   <p> This document is governed by the <a href="https://www.w3.org/2019/Process-20190301/" id="w3c_process_revision">1 March 2019 W3C Process Document</a>. </p>
   <p></p>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li><a href="#introduction"><span class="secno">1</span> <span class="content">Introduction</span></a>
    <li>
     <a href="#reading-this-document"><span class="secno">2</span> <span class="content">Reading This Document</span></a>
     <ol class="toc">
      <li><a href="#module-interactions"><span class="secno">2.1</span> <span class="content">Module interactions</span></a>
      <li><a href="#values"><span class="secno">2.2</span> <span class="content">Values</span></a>
     </ol>
    <li>
     <a href="#csscompositingandblending"><span class="secno">3</span> <span class="content">Specifying Blending in CSS </span></a>
     <ol class="toc">
      <li><a href="#compositingandblendingorder"><span class="secno">3.1</span> <span class="content">Order of graphical operations</span></a>
      <li><a href="#csscompositingrules_CSS"><span class="secno">3.2</span> <span class="content">Behavior specific to HTML</span></a>
      <li><a href="#csscompositingrules_SVG"><span class="secno">3.3</span> <span class="content">Behavior specific to SVG</span></a>
      <li>
       <a href="#csskeywords"><span class="secno">3.4</span> <span class="content">CSS Properties</span></a>
       <ol class="toc">
        <li><a href="#mix-blend-mode"><span class="secno">3.4.1</span> <span class="content">The <span class="property">mix-blend-mode</span> property</span></a>
        <li><a href="#isolation"><span class="secno">3.4.2</span> <span class="content">The <span class="property">isolation</span> property</span></a>
        <li><a href="#background-blend-mode"><span class="secno">3.4.3</span> <span class="content">The <span class="property">background-blend-mode</span> property</span></a>
       </ol>
     </ol>
    <li><a href="#canvascompositingandblending"><span class="secno">4</span> <span class="content">Specifying Compositing and Blending in Canvas 2D</span></a>
    <li>
     <a href="#whatiscompositing"><span class="secno">5</span> <span class="content">Introduction to compositing</span></a>
     <ol class="toc">
      <li>
       <a href="#simplealphacompositing"><span class="secno">5.1</span> <span class="content">Simple alpha compositing</span></a>
       <ol class="toc">
        <li><a href="#simplealphacompositingexamples"><span class="secno">5.1.1</span> <span class="content">Examples of simple alpha compositing</span></a>
       </ol>
     </ol>
    <li><a href="#generalformula"><span class="secno">6</span> <span class="content">General Formula for Compositing and Blending</span></a>
    <li>
     <a href="#backdropCalc"><span class="secno">7</span> <span class="content">Backdrop calculation</span></a>
     <ol class="toc">
      <li><a href="#backdropexamples"><span class="secno">7.1</span> <span class="content">Examples of backdrop calculation</span></a>
     </ol>
    <li>
     <a href="#groups"><span class="secno">8</span> <span class="content">Compositing Groups</span></a>
     <ol class="toc">
      <li><a href="#groupinvariance"><span class="secno">8.1</span> <span class="content">Group invariance</span></a>
      <li><a href="#isolatedgroups"><span class="secno">8.2</span> <span class="content">Isolated Groups</span></a>
      <li><a href="#pagebackdrop"><span class="secno">8.3</span> <span class="content">The Root Element Group</span></a>
      <li><a href="#rootgroup"><span class="secno">8.4</span> <span class="content">The Root Group</span></a>
     </ol>
    <li>
     <a href="#advancedcompositing"><span class="secno">9</span> <span class="content">Advanced compositing features</span></a>
     <ol class="toc">
      <li>
       <a href="#porterduffcompositingoperators"><span class="secno">9.1</span> <span class="content">The Porter Duff Compositing Operators</span></a>
       <ol class="toc">
        <li><a href="#porterduffcompositingoperators_clear"><span class="secno">9.1.1</span> <span class="content">Clear</span></a>
        <li><a href="#porterduffcompositingoperators_src"><span class="secno">9.1.2</span> <span class="content">Copy</span></a>
        <li><a href="#porterduffcompositingoperators_dst"><span class="secno">9.1.3</span> <span class="content">Destination</span></a>
        <li><a href="#porterduffcompositingoperators_srcover"><span class="secno">9.1.4</span> <span class="content">Source Over</span></a>
        <li><a href="#porterduffcompositingoperators_dstover"><span class="secno">9.1.5</span> <span class="content">Destination Over</span></a>
        <li><a href="#porterduffcompositingoperators_srcin"><span class="secno">9.1.6</span> <span class="content">Source In</span></a>
        <li><a href="#porterduffcompositingoperators_dstin"><span class="secno">9.1.7</span> <span class="content">Destination In</span></a>
        <li><a href="#porterduffcompositingoperators_srcout"><span class="secno">9.1.8</span> <span class="content">Source Out</span></a>
        <li><a href="#porterduffcompositingoperators_dstout"><span class="secno">9.1.9</span> <span class="content">Destination Out</span></a>
        <li><a href="#porterduffcompositingoperators_srcatop"><span class="secno">9.1.10</span> <span class="content">Source Atop</span></a>
        <li><a href="#porterduffcompositingoperators_dstatop"><span class="secno">9.1.11</span> <span class="content">Destination Atop</span></a>
        <li><a href="#porterduffcompositingoperators_xor"><span class="secno">9.1.12</span> <span class="content">XOR</span></a>
        <li><a href="#porterduffcompositingoperators_plus"><span class="secno">9.1.13</span> <span class="content">Lighter</span></a>
       </ol>
      <li><a href="#groupcompositing"><span class="secno">9.2</span> <span class="content">Group compositing behavior with Porter Duff modes</span></a>
     </ol>
    <li>
     <a href="#blending"><span class="secno">10</span> <span class="content">Blending</span></a>
     <ol class="toc">
      <li>
       <a href="#blendingseparable"><span class="secno">10.1</span> <span class="content">Separable blend modes</span></a>
       <ol class="toc">
        <li><a href="#blendingnormal"><span class="secno">10.1.1</span> <span class="content"><span>normal</span> blend mode</span></a>
        <li><a href="#blendingmultiply"><span class="secno">10.1.2</span> <span class="content"><span>multiply</span> blend mode</span></a>
        <li><a href="#blendingscreen"><span class="secno">10.1.3</span> <span class="content"><span>screen</span> blend mode</span></a>
        <li><a href="#blendingoverlay"><span class="secno">10.1.4</span> <span class="content"><span>overlay</span> blend mode</span></a>
        <li><a href="#blendingdarken"><span class="secno">10.1.5</span> <span class="content"><span>darken</span> blend mode</span></a>
        <li><a href="#blendinglighten"><span class="secno">10.1.6</span> <span class="content"><span>lighten</span> blend mode</span></a>
        <li><a href="#blendingcolordodge"><span class="secno">10.1.7</span> <span class="content"><span>color-dodge</span> blend mode</span></a>
        <li><a href="#blendingcolorburn"><span class="secno">10.1.8</span> <span class="content"><span>color-burn</span> blend mode</span></a>
        <li><a href="#blendinghardlight"><span class="secno">10.1.9</span> <span class="content"><span>hard-light</span> blend mode</span></a>
        <li><a href="#blendingsoftlight"><span class="secno">10.1.10</span> <span class="content"><span>soft-light</span> blend mode</span></a>
        <li><a href="#blendingdifference"><span class="secno">10.1.11</span> <span class="content"><span>difference</span> blend mode</span></a>
        <li><a href="#blendingexclusion"><span class="secno">10.1.12</span> <span class="content"><span>exclusion</span> blend mode</span></a>
       </ol>
      <li>
       <a href="#blendingnonseparable"><span class="secno">10.2</span> <span class="content">Non-separable blend modes</span></a>
       <ol class="toc">
        <li><a href="#blendinghue"><span class="secno">10.2.1</span> <span class="content"><span>hue</span> blend mode</span></a>
        <li><a href="#blendingsaturation"><span class="secno">10.2.2</span> <span class="content"><span>saturation</span> blend mode</span></a>
        <li><a href="#blendingcolor"><span class="secno">10.2.3</span> <span class="content"><span>color</span> blend mode</span></a>
        <li><a href="#blendingluminosity"><span class="secno">10.2.4</span> <span class="content"><span>luminosity</span> blend mode</span></a>
       </ol>
      <li><a href="#isolationblending"><span class="secno">10.3</span> <span class="content">Effect of group isolation on blending</span></a>
     </ol>
    <li><a href="#security"><span class="secno">11</span> <span class="content">Security issues with compositing and blending</span></a>
    <li><a href="#changes"><span class="secno">12</span> <span class="content">Changes</span></a>
    <li>
     <a href="#conformance"><span class="secno"></span> <span class="content"> Conformance</span></a>
     <ol class="toc">
      <li><a href="#document-conventions"><span class="secno"></span> <span class="content"> Document conventions</span></a>
      <li><a href="#conform-classes"><span class="secno"></span> <span class="content"> Conformance classes</span></a>
      <li>
       <a href="#conform-responsible"><span class="secno"></span> <span class="content"> Requirements for Responsible Implementation of CSS</span></a>
       <ol class="toc">
        <li><a href="#conform-partial"><span class="secno"></span> <span class="content"> Partial Implementations</span></a>
        <li><a href="#conform-future-proofing"><span class="secno"></span> <span class="content"> Implementations of Unstable and Proprietary Features</span></a>
        <li><a href="#conform-testing"><span class="secno"></span> <span class="content"> Implementations of CR-level Features</span></a>
       </ol>
     </ol>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
      <li><a href="#informative"><span class="secno"></span> <span class="content">Informative References</span></a>
     </ol>
    <li><a href="#property-index"><span class="secno"></span> <span class="content">Property Index</span></a>
   </ol>
  </nav>
  <main>
   <h2 class="heading settled" data-level="1" id="introduction"><span class="secno">1. </span><span class="content">Introduction</span><a class="self-link" href="#introduction"></a></h2>
   <p><em>This subsection is non-normative.</em><br> The first part of this document describes the properties used to control the compositing in CSS.
The second part will describe the algorithms of Porter Duff compositing and blending. </p>
   <h2 class="heading settled" data-level="2" id="reading-this-document"><span class="secno">2. </span><span class="content">Reading This Document</span><a class="self-link" href="#reading-this-document"></a></h2>
   <p>Each section of this document is normative unless otherwise specified.</p>
   <h3 class="heading settled" data-level="2.1" id="module-interactions"><span class="secno">2.1. </span><span class="content">Module interactions</span><a class="self-link" href="#module-interactions"></a></h3>
   <p>This specification defines a set of CSS properties that affect the visual rendering of elements to which
those properties are applied; these effects are applied after elements have been sized and positioned according
to the <a href="https://www.w3.org/TR/CSS2/visuren.html" title="Visual formatting model">Visual formatting model</a> from <a data-link-type="biblio" href="#biblio-css21">[CSS21]</a>. Some values of these properties result in the creation of a <a href="https://www.w3.org/TR/CSS2/visuren.html#containing-block" title="Visual formatting model">containing block</a>,
and/or the creation of a <a data-link-type="dfn">stacking context</a>.</p>
   <p>The <a class="property" data-link-type="propdesc" href="#propdef-background-blend-mode" id="ref-for-propdef-background-blend-mode">background-blend-mode</a> property also builds upon the properties defined in the <a href="https://www.w3.org/TR/css3-background/#placement" title="Backgrounds and Borders">CSS  Backgrounds and Borders</a> module <a data-link-type="biblio" href="#biblio-css3bg">[CSS3BG]</a>.</p>
   <p>This specification also enhances the rules as specified in <a href="https://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#SimpleAlphaBlending" title="simple alpha blending">Section 14.2 Simple alpha compositing</a> of <a data-link-type="biblio" href="#biblio-svg11">[SVG11]</a> and <a href="https://www.w3.org/TR/css3-color/#alpha" title="simple alpha compositing">simple alpha compositing</a> of <a data-link-type="biblio" href="#biblio-css3color">[CSS3COLOR]</a>.</p>
   <p>This module also extends the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-globalcompositeoperation" id="ref-for-dom-context-2d-globalcompositeoperation①">globalCompositeOperation</a></code> attribute.</p>
   <h3 class="heading settled" data-level="2.2" id="values"><span class="secno">2.2. </span><span class="content">Values</span><a class="self-link" href="#values"></a></h3>
   <p>This specification follows the <a href="https://www.w3.org/TR/CSS21/about.html#property-defs">CSS property
definition conventions</a> from <a data-link-type="biblio" href="#biblio-css21">[CSS21]</a>. Value types not defined in
this specification are defined in CSS Level 2 Revision 1 <span>[CSS21]</span>. Other CSS
modules may expand the definitions of these value types: for example <a data-link-type="biblio" href="#biblio-css3color">[CSS3COLOR]</a>,
when combined with this module, expands the definition of the &lt;color>
value type as used in this specification.</p>
   <p>In addition to the property-specific values listed in their definitions,
all properties defined in this specification also accept the <a href="https://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a> keyword as their property value. For readability it has not been repeated
explicitly.</p>
   <h2 class="heading settled" data-level="3" id="csscompositingandblending"><span class="secno">3. </span><span class="content">Specifying Blending in CSS </span><a class="self-link" href="#csscompositingandblending"></a></h2>
   <h3 class="heading settled" data-level="3.1" id="compositingandblendingorder"><span class="secno">3.1. </span><span class="content">Order of graphical operations</span><a class="self-link" href="#compositingandblendingorder"></a></h3>
   <p>The compositing model must follow the <a href="https://www.w3.org/TR/SVG11/render.html#Introduction">SVG compositing</a> model <a data-link-type="biblio" href="#biblio-svg11">[SVG11]</a>: first any filter effect is applied, then any clipping, masking, blending and compositing.</p>
   <h3 class="heading settled" data-level="3.2" id="csscompositingrules_CSS"><span class="secno">3.2. </span><span class="content">Behavior specific to HTML</span><a class="self-link" href="#csscompositingrules_CSS"></a></h3>
   <p>Everything in CSS that creates a <a href="https://www.w3.org/TR/CSS21/zindex.html">stacking context</a> must be considered an <a href="#isolatedgroups">‘isolated’ group</a>. HTML elements themselves should not create groups.</p>
   <p>An element that has blending applied, must blend with all the underlying content of the <a data-link-type="dfn">stacking context</a> <a data-link-type="biblio" href="#biblio-css21">[CSS21]</a> that that element belongs to.</p>
   <p>The root element for an HTML document is the <a href="https://dom.spec.whatwg.org/#document-element">document element</a>.</p>
   <h3 class="heading settled" data-level="3.3" id="csscompositingrules_SVG"><span class="secno">3.3. </span><span class="content">Behavior specific to SVG</span><a class="self-link" href="#csscompositingrules_SVG"></a></h3>
   <p>By default, every element must create a <a href="#isolatedgroups">non-isolated group</a>.</p>
   <p>However, certain operations in SVG will create <a href="#isolatedgroups">isolated groups</a>. If one of the following features is used, the group must become isolated:</p>
   <ul>
    <li>opacity
    <li>filters
    <li>3D transforms (2D transforms must NOT cause isolation)
    <li>blending
    <li>masking
   </ul>
   <p>The root element for SVG is the <a href="https://www.w3.org/TR/SVG11/struct.html#NewDocument">SVG element</a>.</p>
   <h3 class="heading settled" data-level="3.4" id="csskeywords"><span class="secno">3.4. </span><span class="content">CSS Properties</span><a class="self-link" href="#csskeywords"></a></h3>
   <h4 class="heading settled" data-level="3.4.1" id="mix-blend-mode"><span class="secno">3.4.1. </span><span class="content">The <a class="property" data-link-type="propdesc" href="#propdef-mix-blend-mode" id="ref-for-propdef-mix-blend-mode">mix-blend-mode</a> property</span><a class="self-link" href="#mix-blend-mode"></a></h4>
   <p>The blend mode defines the formula that must be used to mix the colors with the backdrop.
This behavior is described in more detail in <a href="#blending">Blending</a>.</p>
   <table class="def propdef" data-link-for-hint="mix-blend-mode">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-mix-blend-mode">mix-blend-mode</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production css" data-link-type="type" href="#ltblendmodegt" id="ref-for-ltblendmodegt" title="Expands to: hue | saturation | darken | exclusion | hard-light | normal | color | luminosity | lighten | overlay | multiply | color-burn | color-dodge | difference | screen | soft-light">&lt;blend-mode></a>
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>normal
     <tr>
      <th>Applies to:
      <td>All elements. In SVG, it applies to <a href="https://www.w3.org/TR/SVG/intro.html#TermContainerElement">container elements</a>, <a href="https://www.w3.org/TR/SVG/intro.html#TermGraphicsElement">graphics elements</a> and <a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsReferencingElement">graphics referencing elements</a>. <a data-link-type="biblio" href="#biblio-svg11">[SVG11]</a>
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>N/A
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>as specified
     <tr>
      <th>Canonical order:
      <td>per grammar
     <tr>
      <th>Media:
      <td>visual
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animatable:</a>
      <td>no
   </table>
   <p>The syntax of the property of <a class="production css" data-link-type="type" href="#ltblendmodegt" id="ref-for-ltblendmodegt①" title="Expands to: hue | saturation | darken | exclusion | hard-light | normal | color | luminosity | lighten | overlay | multiply | color-burn | color-dodge | difference | screen | soft-light">&lt;blend-mode></a> is given with:</p>
<pre class="blendmode prod"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="ltblendmodegt">&lt;blend-mode></dfn> = <a data-link-type="value" href="#valdef-blend-mode-normal" id="ref-for-valdef-blend-mode-normal">normal</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one">|</a> <a data-link-type="value" href="#valdef-blend-mode-multiply" id="ref-for-valdef-blend-mode-multiply">multiply</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①">|</a> <a data-link-type="value" href="#valdef-blend-mode-screen" id="ref-for-valdef-blend-mode-screen">screen</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②">|</a> <a data-link-type="value" href="#valdef-blend-mode-overlay" id="ref-for-valdef-blend-mode-overlay">overlay</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one③">|</a> <a data-link-type="value" href="#valdef-blend-mode-darken" id="ref-for-valdef-blend-mode-darken">darken</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one④">|</a> <a data-link-type="value" href="#valdef-blend-mode-lighten" id="ref-for-valdef-blend-mode-lighten">lighten</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑤">|</a> <a data-link-type="value" href="#valdef-blend-mode-color-dodge" id="ref-for-valdef-blend-mode-color-dodge">color-dodge</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑥">|</a><a data-link-type="value" href="#valdef-blend-mode-color-burn" id="ref-for-valdef-blend-mode-color-burn">color-burn</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑦">|</a> <a data-link-type="value" href="#valdef-blend-mode-hard-light" id="ref-for-valdef-blend-mode-hard-light">hard-light</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑧">|</a> <a data-link-type="value" href="#valdef-blend-mode-soft-light" id="ref-for-valdef-blend-mode-soft-light">soft-light</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑨">|</a> <a data-link-type="value" href="#valdef-blend-mode-difference" id="ref-for-valdef-blend-mode-difference">difference</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⓪">|</a> <a data-link-type="value" href="#valdef-blend-mode-exclusion" id="ref-for-valdef-blend-mode-exclusion">exclusion</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①①">|</a> <a data-link-type="value" href="#valdef-blend-mode-hue" id="ref-for-valdef-blend-mode-hue">hue</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①②">|</a>
<a data-link-type="value" href="#valdef-blend-mode-saturation" id="ref-for-valdef-blend-mode-saturation">saturation</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①③">|</a> <a data-link-type="value" href="#valdef-blend-mode-color" id="ref-for-valdef-blend-mode-color">color</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①④">|</a> <a data-link-type="value" href="#valdef-blend-mode-luminosity" id="ref-for-valdef-blend-mode-luminosity">luminosity</a></pre>
   <p class="note" role="note"><span>Note:</span> Applying a blendmode other than <a class="css" data-link-type="value" href="#valdef-blend-mode-normal" id="ref-for-valdef-blend-mode-normal①">normal</a> to the element must establish a new <a data-link-type="dfn">stacking context</a> <a data-link-type="biblio" href="#biblio-css21">[CSS21]</a>. This group must then be blended and composited with the <span>stacking context</span> that contains the element.</p>
   <div class="example" id="example-7e584e42">
    <a class="self-link" href="#example-7e584e42"></a> 
    <p>Given the following sample markup:</p>
<pre>&lt;body>
  &lt;img src="ducky.png"/>
&lt;/body>
</pre>
    <p>And the following style rule:</p>
<pre>body { background-color: lime; }
</pre>
    <p> ... will produce the following result: </p>
    <div class="figure">
      <img alt="example of an image of duck with the lime color of the document" src="examples/ducky_normal.png" style="width:30%"> 
     <p class="caption"> Partially transparent image on a lime backdrop</p>
    </div>
    <p>If we change the style rule to include blending:</p>
<pre>body { background-color: lime; }
img { mix-blend-mode: multiply; }
</pre>
    <p> ... the output will be the image blending with the lime background of the &lt;body> element. </p>
    <div class="figure">
      <img alt="example of an image of duck blending with the lime color of the document" src="examples/ducky_multiply.png" style="width:30%"> 
     <p class="caption"> Blending of a transparent image on a lime backdrop. </p>
    </div>
   </div>
   <div class="example" id="example-cc75cc4f">
    <a class="self-link" href="#example-cc75cc4f"></a> 
    <p>Given the following svg code:</p>
<pre>&lt;svg>
  &lt;circle cx="40" cy="40" r="40" fill="red"/>
  &lt;circle cx="80" cy="40" r="40" fill="lime"/>
  &lt;circle cx="60" cy="80" r="40" fill="blue"/>
&lt;/svg>
</pre>
    <p>And the following style rule:</p>
<pre>circle { mix-blend-mode: screen; }
</pre>
    <p> ... the output will be blending of the 3 circles. Each circle is rendered from bottom to top. Where the elements overlap, the blend mode produces a change in color. </p>
    <div class="figure">
      <img alt="example of 3 circles blending with a screen blend mode" src="examples/screen_example.svg" style="width:30%"> 
     <p class="caption"> Example of 3 circles blending with a screen blend mode </p>
    </div>
   </div>
   <div class="example" id="example-0c443386">
    <a class="self-link" href="#example-0c443386"></a> 
    <p>In the following style sheet and document fragment:</p>
<pre>body { background-color: lime; }
div { background-color: red; width: 200px; opacity: .95}
img { mix-blend-mode: difference; }

&lt;body>
  &lt;div>
     &lt;img src="ducky.png"/>
  &lt;/div>
&lt;/body>
</pre>
    <p> ... the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-color-4/#propdef-opacity" id="ref-for-propdef-opacity">opacity</a> on the &lt;div> element is causing the creation of a stacking context. This causes the creation of a new group so the image doesn’t blend with the color of the &lt;body>. </p>
    <div class="figure">
      <img alt="example of an image of duck blending with the lime color of the document" src="examples/ducky_difference.png" style="width:30%"> 
     <p class="caption"> Example of blending within a stacking context.</p>
    </div>
    <p> Note how the image is not blending with the lime color. </p>
   </div>
   <div class="example" id="example-f6e93bc6">
    <a class="self-link" href="#example-f6e93bc6"></a> 
    <p>Given the following sample markup:</p>
<pre>&lt;body>
   &lt;div>
     &lt;p><a class="css" data-link-type="maybe" href="#valdef-blend-mode-overlay" id="ref-for-valdef-blend-mode-overlay①">overlay</a> blending on text&lt;/p>
   &lt;/div>
&lt;/body>
</pre>
    <p>And the following style rule:</p>
<pre>div { background-image: url('texture.png'); }
@font-face {
  font-family: "Mythos Std";
  src: url("http://myfontvendor.com/mythos.otf");
}
p {
  mix-blend-mode: overlay;
  font-family: "Mythos Std"
}
</pre>
    <div class="figure">
      <img alt="example of text that has an overlay blend on top of a texture" src="examples/overlay_text.png" style="width:75%"> 
     <p class="caption"> Text with a blend overlay on top of an image. </p>
    </div>
   </div>
   <h4 class="heading settled" data-level="3.4.2" id="isolation"><span class="secno">3.4.2. </span><span class="content">The <a class="property" data-link-type="propdesc" href="#propdef-isolation" id="ref-for-propdef-isolation">isolation</a> property</span><a class="self-link" href="#isolation"></a></h4>
   <p>In SVG, this defines whether an element is isolated or not.<br> For CSS, setting <a class="property" data-link-type="propdesc" href="#propdef-isolation" id="ref-for-propdef-isolation①">isolation</a> to <span class="css">isolate</span> will turn the element into a stacking context.</p>
   <p>By default, elements use the <span class="css">auto</span> keyword which implies that they are not isolated. However operations that cause the creation of stacking context <a data-link-type="biblio" href="#biblio-css21">[CSS21]</a> must cause a group to be isolated. These operations are described in <a href="#csscompositingrules_CSS">'behavior specific to HTML'</a> and <a href="#csscompositingrules_SVG">'behavior specific to SVG'</a>.</p>
   <table class="def propdef" data-link-for-hint="isolation">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-isolation">isolation</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production css" data-link-type="type" href="#isolated-propid" id="ref-for-isolated-propid">&lt;isolation-mode></a>
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>auto
     <tr>
      <th>Applies to:
      <td>All elements. In SVG, it applies to <a href="https://www.w3.org/TR/SVG/intro.html#TermContainerElement">container elements</a>, <a href="https://www.w3.org/TR/SVG/intro.html#TermGraphicsElement">graphics elements</a> and <a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsReferencingElement">graphics referencing elements</a>. <a data-link-type="biblio" href="#biblio-svg11">[SVG11]</a>
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>N/A
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>as specified
     <tr>
      <th>Canonical order:
      <td>per grammar
     <tr>
      <th>Media:
      <td>visual
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animatable:</a>
      <td>no
   </table>
   <p>The syntax of the property of <a class="production css" data-link-type="type" href="#isolated-propid" id="ref-for-isolated-propid①">&lt;isolation-mode></a> is given with:</p>
<pre class="isolated prod"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="isolated-propid">&lt;isolation-mode></dfn> = auto <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⑤">|</a> isolate</pre>
   <p id="img_isolation"> In CSS, a background image or the content of an <a data-link-type="element" href="https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element" id="ref-for-the-img-element">img</a> must always be rendered into an isolated group.<br>For instance, if you link to an SVG file through the <span id="ref-for-the-img-element①">img</span> tag, the artwork of that SVG will not blend with the backdrop of the content.</p>
   <p>In SVG, <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/SVG11/masking.html#MaskProperty" id="ref-for-MaskProperty">mask</a> always creates an isolated group.</p>
   <h4 class="heading settled" data-level="3.4.3" id="background-blend-mode"><span class="secno">3.4.3. </span><span class="content">The <a class="property" data-link-type="propdesc" href="#propdef-background-blend-mode" id="ref-for-propdef-background-blend-mode①">background-blend-mode</a> property</span><a class="self-link" href="#background-blend-mode"></a></h4>
   <p>Defines the blending mode of each background layer.</p>
   <p>Each background layer must blend with the element’s background layer that is below it and the element’s background color. Background layers must not blend with the content that is behind the element, instead they must act as if they are rendered into an isolated group.</p>
   <p>The description of the <a class="property" data-link-type="propdesc" href="#propdef-background-blend-mode" id="ref-for-propdef-background-blend-mode②">background-blend-mode</a> property is as follows:</p>
   <table class="def propdef" data-link-for-hint="background-blend-mode">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-background-blend-mode">background-blend-mode</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production css" data-link-type="type" href="#ltblendmodegt" id="ref-for-ltblendmodegt②" title="Expands to: hue | saturation | darken | exclusion | hard-light | normal | color | luminosity | lighten | overlay | multiply | color-burn | color-dodge | difference | screen | soft-light">&lt;blend-mode></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-comma" id="ref-for-mult-comma">#</a>
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>normal
     <tr>
      <th>Applies to:
      <td>All HTML elements
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>N/A
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>as specified
     <tr>
      <th>Canonical order:
      <td>per grammar
     <tr>
      <th>Media:
      <td>visual
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animatable:</a>
      <td>no
   </table>
   <p>The <a class="property" data-link-type="propdesc" href="#propdef-background-blend-mode" id="ref-for-propdef-background-blend-mode③">background-blend-mode</a> list must be applied in the same order as <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-image" id="ref-for-propdef-background-image">background-image</a> <a data-link-type="biblio" href="#biblio-css3bg">[CSS3BG]</a>. This means that the first element in the list will apply to the layer that is on top. If a property doesn’t have enough comma-separated values to match the number of layers, the UA must calculate its used value by repeating the list of values until there are enough.</p>
   <p></p>
   <p>If the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background" id="ref-for-propdef-background">background</a> <a data-link-type="biblio" href="#biblio-css3bg">[CSS3BG]</a> shorthand is used, the <a class="property" data-link-type="propdesc" href="#propdef-background-blend-mode" id="ref-for-propdef-background-blend-mode④">background-blend-mode</a> property for that element must be reset to its initial value.</p>
   <div class="example" id="example-392c0544">
    <a class="self-link" href="#example-392c0544"></a> 
    <p>Given the following sample markup:</p>
<pre>&lt;body>
   &lt;div>&lt;/div>
&lt;/body>
</pre>
    <p>And the following style rule:</p>
<pre>body { background-color: lime; }
div {
  width: 200px;
  height: 200px;
  background-size: 200px 200px;
  background-repeat:no-repeat;
  background-image: linear-gradient(to right, #000000 0%,#ffffff 100%), url('ducky.png');
  background-blend-mode: difference, normal;
}
</pre>
    <div class="figure">
      <img alt="example of div that has an image of a duck and a gradient that is blending" src="examples/ducky_background_blend.png" style="width:30%"> 
     <p class="caption"> Blending of 2 background images. </p>
    </div>
    <p> Note that the gradient is not blending with the color of <a data-link-type="element" href="https://html.spec.whatwg.org/multipage/sections.html#the-body-element" id="ref-for-the-body-element">body</a>. Instead it retains its original color. </p>
   </div>
   <h2 class="heading settled" data-level="4" id="canvascompositingandblending"><span class="secno">4. </span><span class="content">Specifying Compositing and Blending in Canvas 2D</span><a class="self-link" href="#canvascompositingandblending"></a></h2>
   <p>The <a href="https://html.spec.whatwg.org/multipage/canvas.html#2dcontext">canvas 2d</a> context defines the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-globalcompositeoperation" id="ref-for-dom-context-2d-globalcompositeoperation②">globalCompositeOperation</a></code> attribute that is used to set the current compositing and blending operator.</p>
   <p>This property takes the following value:</p>
   <div class="propdef">
    <dl>
     <dt id="propdef-mix"><a class="self-link" href="#propdef-mix"></a><span class="propdef-title prop-name">‘globalCompositeOperation’</span>
     <dd>
      <table class="propinfo">
       <tbody>
        <tr>
         <td><em>Value:</em>  
         <td> <a class="production css" data-link-type="type" href="#ltblendmodegt" id="ref-for-ltblendmodegt③" title="Expands to: hue | saturation | darken | exclusion | hard-light | normal | color | luminosity | lighten | overlay | multiply | color-burn | color-dodge | difference | screen | soft-light">&lt;blend-mode></a> | <a class="production css" data-link-type="type" href="#compositemode" id="ref-for-compositemode">&lt;composite-mode></a> 
        <tr>
         <td><em>Initial:</em>  
         <td>source-over
      </table>
    </dl>
   </div>
   <p>The syntax of the property of <a class="production css" data-link-type="type" href="#compositemode" id="ref-for-compositemode①">&lt;composite-mode></a> is given with:</p>
<pre class="compositemode prod"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="compositemode">&lt;composite-mode></dfn> = <a href="#porterduffcompositingoperators_clear">clear</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⑥">|</a> <a href="#porterduffcompositingoperators_src">copy</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⑦">|</a> <a href="#porterduffcompositingoperators_srcover">source-over</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⑧">|</a> <a href="#porterduffcompositingoperators_dstover">destination-over</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⑨">|</a> <a href="#porterduffcompositingoperators_srcin">source-in</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②⓪">|</a>    <br><a href="#porterduffcompositingoperators_dstin">destination-in</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②①">|</a> <a href="#porterduffcompositingoperators_srcout">source-out</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②②">|</a> <a href="#porterduffcompositingoperators_dstout">destination-out</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②③">|</a> <a href="#porterduffcompositingoperators_srcatop">source-atop</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②④">|</a>    <br><a href="#porterduffcompositingoperators_dstatop">destination-atop</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②⑤">|</a> <a href="#porterduffcompositingoperators_xor">xor</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②⑥">|</a> <a href="#porterduffcompositingoperators_plus">lighter</a></pre>
   <h2 class="heading settled" data-level="5" id="whatiscompositing"><span class="secno">5. </span><span class="content">Introduction to compositing</span><a class="self-link" href="#whatiscompositing"></a></h2>
   <p>Compositing is the combining of a graphic element with its backdrop.</p>
   <p>In the model described in this specification there are two steps to the overall compositing operation - <a href="#advancedcompositing">Porter-Duff compositing</a> and <a href="#blending">blending</a>.
The blending step determines how the colors from the graphic element and the backdrop interact.</p>
   <p>Typically, the blending step is performed first, followed by the Porter-Duff compositing step.
In the blending step, the resultant color from the mix of the element and the the <a data-link-type="dfn" href="#backdrop" id="ref-for-backdrop①">backdrop</a> is calculated. The graphic element’s color is replaced with this resultant color.
The graphic element is then composited with the <span id="ref-for-backdrop②">backdrop</span> using the specified compositing operator.</p>
   <p class="note" role="note"><span>Note:</span> Shape is defined by the mathematical description of the shape. A particular point is either inside the shape or it is not. There are no gradations.</p>
   <p class="note" role="note"><span>Note:</span> Opacity is described using an alpha value, stored alongside the color value for each particular point. The alpha value is between 0 and 1, inclusive.
 A value of 0 means that the pixel has no coverage at that point, and is therefore
transparent; i.e. there is no color contribution from any geometry because the geometry does not overlap this pixel. A value of 1 means that the pixel is fully opaque; the geometry completely overlaps the pixel.</p>
   <h3 class="heading settled" data-level="5.1" id="simplealphacompositing"><span class="secno">5.1. </span><span class="content">Simple alpha compositing</span><a class="self-link" href="#simplealphacompositing"></a></h3>
   <p>The formula for simple alpha compositing is</p>
<pre>co = Cs x αs + Cb x αb x (1 - αs)
</pre>
   <p>Where</p>
   <ul>
    <li>co: the premultiplied pixel value after compositing 
    <li>Cs: the color value of the source graphic element being composited 
    <li>αs: the alpha value of the source graphic element being composited 
    <li>Cb: the color value of the <a data-link-type="dfn" href="#backdrop" id="ref-for-backdrop③">backdrop</a> 
    <li>αb: the alpha value of the <a data-link-type="dfn" href="#backdrop" id="ref-for-backdrop④">backdrop</a> 
   </ul>
   <p class="note" role="note"><span>Note:</span> All values are between 0 and 1 inclusive.</p>
   <p>The pixel value after compositing (co) is given by adding the contributions from the source graphic element [Cs x αs] and the backdrop [Cb x αb x (1 - αs)].
For both the graphic element and the backdrop, the color values are multiplied by the alpha to determine the amount of color that contributes.
With zero alpha meaning that the color does not contribute and partial alpha means that some percentage of the color contributes.
The contribution of the backdrop is further reduced based on the opacity of the graphic element.
Conceptually, (1 - αs) of the backdrop shows through the graphic element, meaning that if the graphic element is fully opaque (αs=1) then no backdrop shows through.</p>
   <p>The simple alpha compositing formula listed above gives a resultant color which is the result of the
weighted average of the backdrop color and graphic element color, with the weighting determined by the backdrop and
graphic element alphas.
The resultant alpha value of the composite is simply the sum of the contributed alpha of the composited elements.
The formula for the resultant alpha of the composite is</p>
<pre>αo = αs + αb x (1 - αs)
</pre>
   <p>Where</p>
   <ul>
    <li>αo: the alpha value of the composite 
    <li>αs: the alpha value of the graphic element being composited 
    <li>αb: the alpha value of the <a data-link-type="dfn" href="#backdrop" id="ref-for-backdrop⑤">backdrop</a> 
   </ul>
   <p></p>
   <div class="note" role="note">
    <p> Often, it can be more efficient to store a <code>pre-multiplied value</code> for the color and opacity.
The pre-multiplied value is given by </p>
<pre>cs = Cs x αs
</pre>
    <p>with</p>
    <ul>
     <li>cs: the pre-multiplied value 
     <li>Cs: the color value 
     <li>αs: the alpha value 
    </ul>
    <p> Thus the formula for simple alpha compositing using pre-multiplied values becomes </p>
<pre>co = cs + cb x (1 - αs)
</pre>
    <p></p>
    <p></p>
    <p> To extract the color component of a pre-multiplied value, the formula is reversed: </p>
<pre>Co = co / αo
</pre>
    <p></p>
   </div>
   <h4 class="heading settled" data-level="5.1.1" id="simplealphacompositingexamples"><span class="secno">5.1.1. </span><span class="content">Examples of simple alpha compositing</span><a class="self-link" href="#simplealphacompositingexamples"></a></h4>
   <div class="example" id="example-01feca57">
    <a class="self-link" href="#example-01feca57"></a> 
    <div class="figure">
      <img alt="Simple box showing alpha compositing" src="examples/simple_box.svg"> 
     <p class="caption"></p>
    </div>
    <p> This describes the most basic case. It consists of 1 shape that is filled with a solid color (α = 1).
The shape is composited with an empty background. The empty background has no effect on the resultant composite. </p>
<pre>Cs = RGB(1,0,0)
αs = 1
Cb = RGB(0,0,0)
αb = 0

co = Cs x αs + Cb x αb x (1 - αs)
co = RGB(1,0,0) x 1 + RGB(0,0,0) x 0 x (1 - 1)
co = RGB(1,0,0) x 1
co = RGB(1,0,0)
</pre>
    <p></p>
   </div>
   <div class="example" id="example-189dd094">
    <a class="self-link" href="#example-189dd094"></a> 
    <div class="figure">
      <img alt="simple shape" src="examples/two_box.svg"> 
     <p class="caption"></p>
    </div>
    <p> This is a more complex example. There is no transparency, but the 2 shapes intersect. </p>
    <p> Applying the compositing formula in the area of intersection, gives: </p>
<pre>Cs = RGB(0,0,1)
αs = 1
Cb = RGB(1,0,0)
αb = 1

co = Cs x αs + Cb x αb x (1 - αs)
co = RGB(0,0,1) x 1 + RGB(1,0,0) x 1 x (1 - 1)
co = RGB(0,0,1) x 1 + RGB(1,0,0) x 1 x 0
co = RGB(0,0,1) x 1
co = RGB(0,0,1)
</pre>
    <p>Calculating the alpha of the resultant composite</p>
<pre>αo = αs + αb x (1 - αs)
αo = 1 + 1 x (1 - 1)
αo = 1
</pre>
    <p>Calculating the color component of the resultant composite</p>
<pre>Co = co / αo
Co = RGB(0, 0, 1) / 1
Co = RGB(0, 0, 1)
</pre>
    <p></p>
   </div>
   <div class="example" id="example-418d3c3f">
    <a class="self-link" href="#example-418d3c3f"></a> 
    <div class="figure">
      <img alt="interaction of a solid box with a transparent box on top" src="examples/two_box_transparency.svg"> 
     <p class="caption"></p>
    </div>
    <p> This is an example where the shape has some transparency, but the <a data-link-type="dfn" href="#backdrop" id="ref-for-backdrop⑥">backdrop</a> is fully opaque. </p>
    <p> Applying the compositing formula in the area of intersection, gives: </p>
<pre>Cs = RGB(0,0,1)
αs = 0.5
Cb = RGB(1,0,0)
αb = 1

co = Cs x αs + Cb x αb x (1 - αs)
co = RGB(0,0,1) x 0.5 + RGB(1,0,0) x 1 x (1 - 0.5)
co = RGB(0,0,1) x 0.5 + RGB(1,0,0) x 0.5
co = RGB(0.5,0,0.5)
</pre>
    <p>Calculating the alpha of the resultant composite</p>
<pre>αo = αs + αb x (1 - αs)
αo = 0.5 + 1 x (1 - 0.5)
αo = 1
</pre>
    <p>Calculating the color component of the resultant composite</p>
<pre>Co = co / αo
Co = RGB(0.5, 0, 0.5) / 1
Co = RGB(0.5, 0, 0.5)
</pre>
    <p></p>
   </div>
   <div class="example" id="example-9f8d7c4e">
    <a class="self-link" href="#example-9f8d7c4e"></a> 
    <div class="figure">
      <img alt="interaction of 2 transparent boxes" src="examples/two_box_transparency_both.svg"> 
     <p class="caption"></p>
    </div>
    <p> Figure 4 shows an example where both the shape and the <a data-link-type="dfn" href="#backdrop" id="ref-for-backdrop⑦">backdrop</a> are transparent. </p>
    <p> Applying the compositing formula in the area of intersection, gives: </p>
<pre>Cs = RGB(0,0,1)
αs = 0.5
Cb = RGB(1,0,0)
αb = 0.5

co = Cs x αs + Cb x αb x (1 - αs)
co = RGB(0,0,1) x 0.5 + RGB(1,0,0) x 0.5 x (1 - 0.5)
co = RGB(0,0,1) x 0.5 + RGB(1,0,0) x 0.25
co = RGB(0.25, 0, 0.5)
</pre>
    <p>Calculating the alpha of the resultant composite</p>
<pre>αo = αs + αb x (1 - αs)
αo = 0.5 + 0.5 x (1 - 0.5)
αo = 0.75
</pre>
    <p>Calculating the color component of the resultant composite</p>
<pre>Co = co / αo
Co = RGB(0.25, 0, 0.5) / 0.75
Co = RGB(0.33, 0, 0.66)
</pre>
    <p></p>
   </div>
   <h2 class="heading settled" data-level="6" id="generalformula"><span class="secno">6. </span><span class="content">General Formula for Compositing and Blending</span><a class="self-link" href="#generalformula"></a></h2>
   <p>The general formula for compositing and blending which allows for selection of the compositing operator and blending function comprises two steps.
The terms used in these functions will be described in detail in the following sections.</p>
   <p>Apply the blend in place</p>
<pre>Cs = (1 - αb) x Cs + αb x B(Cb, Cs)
</pre>
   <p>Composite</p>
<pre>Co = αs x Fa x Cs + αb x Fb x Cb
</pre>
   <p>Where:</p>
   <ul>
    <li><strong>Cs</strong>: is the source color 
    <li><strong>Cb</strong>: is the backdrop color 
    <li><strong>αs</strong>: is the source alpha 
    <li><strong>αb</strong>: is the backdrop alpha 
    <li><strong>B(Cb, Cs)</strong>: is the mixing function 
    <li><strong>Fa</strong>: is defined by the Porter Duff operator in use 
    <li><strong>Fb</strong>: is defined by the Porter Duff operator in use 
   </ul>
   <h2 class="heading settled" data-level="7" id="backdropCalc"><span class="secno">7. </span><span class="content">Backdrop calculation</span><a class="self-link" href="#backdropCalc"></a></h2>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="backdrop">backdrop</dfn> is the content behind the element and is what the element is composited with.
This means that the backdrop is the result of compositing all previous elements.</p>
   <h3 class="heading settled" data-level="7.1" id="backdropexamples"><span class="secno">7.1. </span><span class="content">Examples of backdrop calculation</span><a class="self-link" href="#backdropexamples"></a></h3>
   <div class="example" id="example-fddbb891">
    <a class="self-link" href="#example-fddbb891"></a> 
    <div class="figure">
      <img alt="example of a simple backdrop calculation" src="examples/simple_backdrop.svg"> 
     <p class="caption"></p>
    </div>
    <p> This example has 2 simple shapes. The backdrop for the blue shape includes the bottom right corner of the red shape .
The dotted line shows the area that is examined during compositing of the blue shape. </p>
   </div>
   <div class="example" id="example-5dfb7a50">
    <a class="self-link" href="#example-5dfb7a50"></a> 
    <div class="figure">
      <img alt="example of a backdrop with alpha" src="examples/simple_backdrop_alpha.svg"> 
     <p class="caption"></p>
    </div>
    <p> The shape in the backdrop has an alpha value. The alpha value of the backdrop shape is preserved when the backdrop is calculated. </p>
   </div>
   <h2 class="heading settled" data-level="8" id="groups"><span class="secno">8. </span><span class="content">Compositing Groups</span><a class="self-link" href="#groups"></a></h2>
   <p>Compositing groups allow more control over the interaction of compositing with the backdrop. Groups can be used to specify how a compositing effect
within a group will interact with the content that is already in the scene (the backdrop).</p>
   <p>Compositing groups may be made up of any number of elements, and may contain other compositing groups.</p>
   <p>The default properties of a compositing group shall cause no visual difference compared to having no group. See <a href="#groupinvariance">Group Invariance</a>.</p>
   <p>A compositing group is rendered by first compositing the elements of the group onto the initial backdrop. The result of this is a single element containing
color and alpha information. This element is then composited onto the group backdrop.
Steps shall be taken to ensure the group backdrop makes only a single contribution to the final composite.</p>
   <dl>
    <dt id="initialbackdrop"><a class="self-link" href="#initialbackdrop"></a>initial backdrop
    <dd> The initial backdrop is the backdrop used for compositing the group’s first element. This will be the same as the group backdrop in a non-isolated
group, or a fully transparent backdrop for an isolated group. 
    <dt id="groupbackdrop"><a class="self-link" href="#groupbackdrop"></a>group backdrop
    <dd> The group backdrop is the result of compositing all elements up to but not including the first element in the group. 
   </dl>
   <h3 class="heading settled" data-level="8.1" id="groupinvariance"><span class="secno">8.1. </span><span class="content">Group invariance</span><a class="self-link" href="#groupinvariance"></a></h3>
   <p>An important property of simple alpha compositing is its group invariance. This behavior is preserved in the more complex model described in this specification.
Adding or removing grouping with default attributes shall not show visual differences.</p>
<pre>so: A + B + C = A + (B + C) = (A + B) + C</pre>
   <p>When adding attributes to the group such as <span class="css">isolate</span>, blending modes other than <a class="css" data-link-type="maybe" href="#valdef-blend-mode-normal" id="ref-for-valdef-blend-mode-normal②">normal</a> or Porter Duff compositing operators other than <span class="css">source-over</span>, groups may no longer be invariant.</p>
   <h3 class="heading settled" data-level="8.2" id="isolatedgroups"><span class="secno">8.2. </span><span class="content">Isolated Groups</span><a class="self-link" href="#isolatedgroups"></a></h3>
   <p>In an isolated group, the initial backdrop shall be black and fully transparent.</p>
   <p>In this instance, the initial backdrop is different than the group backdrop. The only interaction with the group backdrop shall occur when the group’s
computed color, shape and alpha are composited with it.</p>
   <p>See '<a href="#groupcompositing">Isolated groups and Porter Duff modes</a>' for a description of the effect of isolated groups on compositing.
See '<a href="#isolationblending">Effect of group isolation on blending</a>' for a description of the effect of isolated groups on blending.</p>
   <h3 class="heading settled" data-level="8.3" id="pagebackdrop"><span class="secno">8.3. </span><span class="content">The Root Element Group</span><a class="self-link" href="#pagebackdrop"></a></h3>
   <p>The <a href="#isolatedgroups">isolated group</a> for the root element is the
root element group. All other elements and groups are composited into this group. The background of the root element (if specified) is painted into the
root element group, and any filter, clip-path, mask and and opacity is then
applied, before compositing into the <a href="#rootgroup">root group</a>,
if present.</p>
   <h3 class="heading settled" data-level="8.4" id="rootgroup"><span class="secno">8.4. </span><span class="content">The Root Group</span><a class="self-link" href="#rootgroup"></a></h3>
    The root group encompasses the entire canvas and contains (or is below) the root element group of the root element of a web page. 
   <p class="note" role="note">Browsers often use an infinite <a href="https://www.w3.org/TR/css-color-4/#sample">white, 100% opaque</a> root group,
for final compositing, but this is not required. </p>
   <h2 class="heading settled" data-level="9" id="advancedcompositing"><span class="secno">9. </span><span class="content">Advanced compositing features</span><a class="self-link" href="#advancedcompositing"></a></h2>
   <p><a href="#simplealphacompositing">Simple alpha compositing</a> uses the <a href="#porterduffcompositingoperators_srcover">source-over</a> Porter Duff compositing operator.</p>
   <p>Porter Duff compositing is based on a model of a pixel in which two shapes (source and destination) may contribute to the final color of the pixel. The pixel is divided into 4 sub-pixel regions and each region represents a possible combination of source and destination. <a data-link-type="biblio" href="#biblio-porterduff">[PORTERDUFF]</a></p>
   <p></p>
   <p>The four regions are:</p>
   <dl>
    <dt>Source Only
    <dd>Where only the source contributes to the pixel color
    <dt>Destination only
    <dd>where only the destination contributes to the pixel color
    <dt>Both
    <dd>Source and Destination – where both the source and destination may combine to define the pixel color
    <dt>None
    <dd>No source or Destination – where neither make a contribution to the final pixel color
   </dl>
   <p class="note" role="note"><span>Note:</span> Destination is synonymous with backdrop. The term destination is used in this section as this is considered the standard when working with Porter Duff compositing. Additionally, the compositing operators use <span class="css">destination</span> in their names.</p>
   <div class="figure">
    <p style="text-align:center"><img alt="overview of the regions affected by porter duff" src="examples/PD_regions.svg"></p>
    <p class="caption"></p>
   </div>
    The contribution from each region to the final pixel color is defined by the coverage of the shape at that pixel, and the operator in use.
Coverage is specified in terms of alpha. Full alpha (1) implies full coverage, while zero alpha (0) implies no coverage.
This means that the area of each region within the sub-pixel is dependent on the coverage of each shape contributing to the pixel.
The area of each region can be calculated with the following equations: 
   <div class="data">
    <table>
     <tbody>
      <tr>
       <th>Both
       <th>αs x αb
      <tr>
       <th>Source only
       <th>αs x (1 – αb)
      <tr>
       <th>Destination only
       <th>αb x (1 – αs)
      <tr>
       <th>None
       <th>(1 – αs) x (1 – αb)
    </table>
   </div>
   <p>The figure above represents coverage of 0.5 for both source and destination.</p>
<pre>Both = 0.5 x 0.5 = 0.25
Source Only = 0.5 (1 – 0.5) = 0.25
Destination Only = 0.5(1 – 0.5) = 0.25
None = (1 – 0.5)(1 – 0.5) = 0.25
</pre>
   <p>Therefore, the coverage of each region is 0.25 in this example.</p>
   <h3 class="heading settled" data-level="9.1" id="porterduffcompositingoperators"><span class="secno">9.1. </span><span class="content">The Porter Duff Compositing Operators</span><a class="self-link" href="#porterduffcompositingoperators"></a></h3>
   <p>The landmark paper by Thomas Porter and Tom Duff, who worked for Lucasfilm, defined the algebra of compositing and developed the twelve "Porter Duff" operators. These operators control the results of mixing the four sub-pixel regions formed by the overlapping of graphical objects that have an alpha or pixel coverage channel/value. The operators use all practical combinations of the four regions.</p>
   <p>There are 12 basic Porter Duff operators, satisfying all possible combinations of source and destination.</p>
   <p>From the geometric representation of each operator, the contribution of each shape can be seen to be expressed as a fraction of the total coverage of the output.
For example, in source over, the possible contribution of source is full (1) and the possible contribution of destination is whatever is remaining (1 – αs). This is modified by the coverage of source and destination to give the equation for the final coverage of the pixel:</p>
<pre>αo = αs x 1 + αb x (1 – αs)
</pre>
   <p>The fractional terms Fa (1 in this example) and Fb (1 – αs in this example) are defined for each operator and specify the fraction of the shapes that may contribute to the final pixel value.
The general form of the equation for coverage is:</p>
<pre>αs x Fa + αb x Fb
</pre>
   <p>and incorporating color gives the general Porter Duff equation</p>
<pre>co = αs x Fa x Cs + αb x Fb x Cb
</pre>
   <p>Where:</p>
   <ul>
    <li>co is the output color pre-multiplied with the output alpha [0 &lt;= co &lt;= 1] 
    <li>αs is the coverage of the source Fa is defined by the operator and controls inclusion of the source Cs is the color of the source (not multiplied by alpha) 
    <li>αb is the coverage of the destination Fb is defined by the operator and controls inclusion of the destination Cb is the color of the destination (not multiplied by alpha) 
   </ul>
   <h4 class="heading settled" data-level="9.1.1" id="porterduffcompositingoperators_clear"><span class="secno">9.1.1. </span><span class="content">Clear</span><a class="self-link" href="#porterduffcompositingoperators_clear"></a></h4>
   <p>No regions are enabled.</p>
   <div class="figure">
     <img alt="example of porter duff clear" src="examples/PD_clr.svg"> 
    <p class="caption"></p>
   </div>
<pre>Fa = 0; Fb = 0
co = 0
αo = 0
</pre>
   <h4 class="heading settled" data-level="9.1.2" id="porterduffcompositingoperators_src"><span class="secno">9.1.2. </span><span class="content">Copy</span><a class="self-link" href="#porterduffcompositingoperators_src"></a></h4>
   <p>Only the source will be present.</p>
   <div class="figure">
     <img alt="example of porter duff copy" src="examples/PD_src.svg"> 
    <p class="caption"></p>
   </div>
<pre>Fa = 1; Fb = 0
co = αs x Cs
αo = αs
</pre>
   <h4 class="heading settled" data-level="9.1.3" id="porterduffcompositingoperators_dst"><span class="secno">9.1.3. </span><span class="content">Destination</span><a class="self-link" href="#porterduffcompositingoperators_dst"></a></h4>
   <p>Only the destination will be present.</p>
   <div class="figure">
     <img alt="example of porter duff destination" src="examples/PD_dst.svg"> 
    <p class="caption"></p>
   </div>
<pre>Fa = 0; Fb = 1
co = αb x Cb
αo = αb
</pre>
   <h4 class="heading settled" data-level="9.1.4" id="porterduffcompositingoperators_srcover"><span class="secno">9.1.4. </span><span class="content">Source Over</span><a class="self-link" href="#porterduffcompositingoperators_srcover"></a></h4>
   <p>Source is placed over the destination.</p>
   <div class="figure">
     <img alt="example of porter duff source over" src="examples/PD_src-over.svg"> 
    <p class="caption"></p>
   </div>
<pre>Fa = 1; Fb = 1 – αs
co = αs x Cs + αb x Cb x (1 – αs)
αo = αs + αb x (1 – αs)
</pre>
   <h4 class="heading settled" data-level="9.1.5" id="porterduffcompositingoperators_dstover"><span class="secno">9.1.5. </span><span class="content">Destination Over</span><a class="self-link" href="#porterduffcompositingoperators_dstover"></a></h4>
   <p>Destination is placed over the source.</p>
   <div class="figure">
     <img alt="example of porter duff destination over" src="examples/PD_dst-over.svg"> 
    <p class="caption"></p>
   </div>
<pre>Fa = 1 – αb; Fb = 1
co = αs x Cs x (1 – αb) + αb x Cb
αo = αs x (1 – αb) + αb
</pre>
   <h4 class="heading settled" data-level="9.1.6" id="porterduffcompositingoperators_srcin"><span class="secno">9.1.6. </span><span class="content">Source In</span><a class="self-link" href="#porterduffcompositingoperators_srcin"></a></h4>
   <p>The source that overlaps the destination, replaces the destination.</p>
   <div class="figure">
     <img alt="example of porter duff source in" src="examples/PD_src-in.svg"> 
    <p class="caption"></p>
   </div>
<pre>Fa = αb; Fb = 0
co = αs x Cs x αb
αo = αs x αb
</pre>
   <h4 class="heading settled" data-level="9.1.7" id="porterduffcompositingoperators_dstin"><span class="secno">9.1.7. </span><span class="content">Destination In</span><a class="self-link" href="#porterduffcompositingoperators_dstin"></a></h4>
    Destination which overlaps the source, replaces the source. 
   <div class="figure">
     <img alt="example of porter duff destination in " src="examples/PD_dst-in.svg"> 
    <p class="caption"></p>
   </div>
<pre>Fa = 0; Fb = αs
co = αb x Cb x αs
αo = αb x αs
</pre>
   <h4 class="heading settled" data-level="9.1.8" id="porterduffcompositingoperators_srcout"><span class="secno">9.1.8. </span><span class="content">Source Out</span><a class="self-link" href="#porterduffcompositingoperators_srcout"></a></h4>
   <p>Source is placed, where it falls outside of the destination.</p>
   <div class="figure">
     <img alt="example of porter duff source out" src="examples/PD_src-out.svg"> 
    <p class="caption"></p>
   </div>
<pre>Fa = 1 – αb; Fb = 0
co = αs x Cs x (1 – αb)
αo = αs x (1 – αb)
</pre>
   <h4 class="heading settled" data-level="9.1.9" id="porterduffcompositingoperators_dstout"><span class="secno">9.1.9. </span><span class="content">Destination Out</span><a class="self-link" href="#porterduffcompositingoperators_dstout"></a></h4>
   <p>Destination is placed, where it falls outside of the source.</p>
   <div class="figure">
     <img alt="example of porter duff destination out" src="examples/PD_dst-out.svg"> 
    <p class="caption"></p>
   </div>
<pre>Fa = 0; Fb = 1 – αs
co = αb x Cb x (1 – αs)
αo = αb x (1 – αs)
</pre>
   <h4 class="heading settled" data-level="9.1.10" id="porterduffcompositingoperators_srcatop"><span class="secno">9.1.10. </span><span class="content">Source Atop</span><a class="self-link" href="#porterduffcompositingoperators_srcatop"></a></h4>
   <p>Source which overlaps the destination, replaces the destination. Destination is placed elsewhere.</p>
   <div class="figure">
     <img alt="example of porter duff source atop" src="examples/PD_src-atop.svg"> 
    <p class="caption"></p>
   </div>
<pre>Fa = αb; Fb = 1 – αs
co = αs x Cs x αb + αb x Cb x (1 – αs)
αo = αs x αb + αb x (1 – αs)
</pre>
   <h4 class="heading settled" data-level="9.1.11" id="porterduffcompositingoperators_dstatop"><span class="secno">9.1.11. </span><span class="content">Destination Atop</span><a class="self-link" href="#porterduffcompositingoperators_dstatop"></a></h4>
   <p>Destination which overlaps the source replaces the source. Source is placed elsewhere.</p>
   <div class="figure">
     <img alt="example of porter duff destination atop" src="examples/PD_dst-atop.svg"> 
    <p class="caption"></p>
   </div>
<pre>Fa = 1 - αb; Fb = αs
co = αs x Cs x (1 - αb) + αb x Cb x αs
αo = αs x (1 - αb) + αb x αs
</pre>
   <h4 class="heading settled" data-level="9.1.12" id="porterduffcompositingoperators_xor"><span class="secno">9.1.12. </span><span class="content">XOR</span><a class="self-link" href="#porterduffcompositingoperators_xor"></a></h4>
   <p>The non-overlapping regions of source and destination are combined.</p>
   <div class="figure">
     <img alt="example of porter duff xor" src="examples/PD_xor.svg"> 
    <p class="caption"></p>
   </div>
<pre>Fa = 1 - αb; Fb = 1 – αs
co = αs x Cs x (1 - αb) + αb x Cb x (1 – αs)
αo = αs x (1 - αb) + αb x (1 – αs)
</pre>
   <h4 class="heading settled" data-level="9.1.13" id="porterduffcompositingoperators_plus"><span class="secno">9.1.13. </span><span class="content">Lighter</span><a class="self-link" href="#porterduffcompositingoperators_plus"></a></h4>
    Display the sum of the source image and destination image. It is defined in the Porter Duff paper as the <span class="css">plus</span> operator <a data-link-type="biblio" href="#biblio-porterduff">[PORTERDUFF]</a>. 
<pre>Fa = 1; Fb = 1
co = αs x Cs + αb x Cb;
αo = αs + αb
</pre>
   <h3 class="heading settled" data-level="9.2" id="groupcompositing"><span class="secno">9.2. </span><span class="content">Group compositing behavior with Porter Duff modes</span><a class="self-link" href="#groupcompositing"></a></h3>
   <p>When compositing the elements within an isolated group, the elements are composited over a transparent black initial backdrop. If the bottom element in the group uses a Porter Duff compositing operator
which is dependent on the backdrop, such as <a href="#porterduffcompositingoperators_dst">destination</a>, <a href="#porterduffcompositingoperators_srcin">source-in</a>, <a href="#porterduffcompositingoperators_dstin">destination-in</a>, <a href="#porterduffcompositingoperators_dstout">destination-out</a> or <a href="#porterduffcompositingoperators_srcatop">source-atop</a>,
then the result of the composite will be empty. Subsequent elements within the group are composited with the result of the first composite.</p>
   <h2 class="heading settled" data-level="10" id="blending"><span class="secno">10. </span><span class="content">Blending</span><a class="self-link" href="#blending"></a></h2>
   <p>Blending is the aspect of compositing that calculates the mixing of colors where the source element and <a data-link-type="dfn" href="#backdrop" id="ref-for-backdrop⑧">backdrop</a> overlap.<br> Conceptually, the colors in the source element are blended in place with the backdrop.
After blending, the modified source element is composited with the backdrop.
In practice, this is usually all performed in one step. <br>The blending calculations must not use pre-multiplied color values.</p>
   <p>The "mixing" formula is defined as:</p>
<pre>Cm = B(Cb, Cs)
</pre>
   <p>with:</p>
   <ul>
    <li>Cm: the result color after blending 
    <li>B: the formula that does the blending 
    <li>Cb: the <a data-link-type="dfn" href="#backdrop" id="ref-for-backdrop⑨">backdrop</a> color 
    <li>Cs: the source color 
   </ul>
   <p>The result of the mixing formula must be clamped to the minimum and maximum values of the color range.</p>
   <p>The result of the mixing function is modulated by the backdrop alpha. A fully opaque backdrop allows the mixing function to be fully realized.
A transparent backdrop will cause the final result to be a weighted average between the source color and mixed color with the weight controlled by the backdrop alpha.
The value of the new color  becomes:</p>
<pre>Cr = (1 - αb) x Cs + αb x B(Cb, Cs)
</pre>
   <p>with:</p>
   <ul>
    <li>Cr: the result color 
    <li>B: the formula that does the blending 
    <li>Cs: the source color 
    <li>Cb: the <a data-link-type="dfn" href="#backdrop" id="ref-for-backdrop①⓪">backdrop</a> color 
    <li>αb: the <a data-link-type="dfn" href="#backdrop" id="ref-for-backdrop①①">backdrop</a> alpha 
   </ul>
   <div class="example" id="example-a731b849">
    <a class="self-link" href="#example-a731b849"></a> 
    <div class="figure">
      <img alt="example of blending with opacity" src="examples/blend_background_opacity.svg"> 
     <p class="caption"></p>
    </div>
    <p> This example has a red rectangle with a blending mode that is placed on top of a set of green rectangles that have different levels of opacity.</p>
    <p> Note how the top rectangle shifts more toward red as the opacity of the <a data-link-type="dfn" href="#backdrop" id="ref-for-backdrop①②">backdrop</a> gets smaller. </p>
   </div>
   <p class="note" role="note"> Note: The following formula gives the color value in the area where the source and backdrop intersects and then composites with the specified Porter Duff compositing formula. For simple alpha blending, the formula thus becomes: </p>
<pre>simple alpha compositing:
  co = cs + cb x (1 - αs)
written as non-premultiplied:
  αo x Co = αs x Cs + (1 - αs) x αb x Cb
now substitute the result of blending for Cs:
    αo x Co = αs x ((1 - αb) x Cs + αb x B(Cb, Cs)) + (1 - αs) x αb x Cb
            = αs x (1 - αb) x Cs + αs x αb x B(Cb, Cs) + (1 - αs) x αb x Cb
</pre>
   <p></p>
   <h3 class="heading settled" data-level="10.1" id="blendingseparable"><span class="secno">10.1. </span><span class="content">Separable blend modes</span><a class="self-link" href="#blendingseparable"></a></h3>
   <p>A blend mode is termed separable if each component of the result color is completely determined by the corresponding components of the constituent <a data-link-type="dfn" href="#backdrop" id="ref-for-backdrop①③">backdrop</a> and source colors — that is, if the mixing formula is applied <strong>separately</strong> to each set of corresponding components.</p>
   <p>Each of the following blend modes will apply the blending function B(Cb, Cs) on each of the color components.
For simplicity, all the examples in this chapter use <a href="#porterduffcompositingoperators_srcover">source-over</a> compositing.</p>
   <h4 class="heading settled" data-level="10.1.1" id="blendingnormal"><span class="secno">10.1.1. </span><span class="content"><dfn class="dfn-paneled css" data-dfn-for="<blend-mode>" data-dfn-type="value" data-export id="valdef-blend-mode-normal">normal</dfn> blend mode</span><a class="self-link" href="#blendingnormal"></a></h4>
   <p>This is the default attribute which specifies no blending. The blending formula simply selects the source color.</p>
<pre>B(Cb, Cs) = Cs
</pre>
   <div class="figure">
     <img alt="example of normal blending" src="examples/normal.png"> 
    <p class="caption"></p>
   </div>
   <h4 class="heading settled" data-level="10.1.2" id="blendingmultiply"><span class="secno">10.1.2. </span><span class="content"><dfn class="dfn-paneled css" data-dfn-for="<blend-mode>" data-dfn-type="value" data-export id="valdef-blend-mode-multiply">multiply</dfn> blend mode</span><a class="self-link" href="#blendingmultiply"></a></h4>
   <p>The source color is multiplied by the destination color and replaces the destination.</p>
   <p>The resultant color is always at least as dark as either the source or destination color. Multiplying any color with black results in black. Multiplying any color with white preserves the original color.</p>
<pre>B(Cb, Cs) = Cb x Cs
</pre>
   <p></p>
   <div class="figure">
     <img alt="example of multiply blending" src="examples/multiply.png"> 
    <p class="caption"></p>
   </div>
   <h4 class="heading settled" data-level="10.1.3" id="blendingscreen"><span class="secno">10.1.3. </span><span class="content"><dfn class="dfn-paneled css" data-dfn-for="<blend-mode>" data-dfn-type="value" data-export id="valdef-blend-mode-screen">screen</dfn> blend mode</span><a class="self-link" href="#blendingscreen"></a></h4>
   <p>Multiplies the complements of the <a data-link-type="dfn" href="#backdrop" id="ref-for-backdrop①④">backdrop</a> and source color values, then complements the result.</p>
   <p>The result color is always at least as light as either of the two constituent colors. Screening any color with white produces white; screening with black leaves the original color unchanged. The effect is similar to projecting multiple photographic slides simultaneously onto a single screen.</p>
<pre>B(Cb, Cs) = 1 - [(1 - Cb) x (1 - Cs)]
          = Cb + Cs -(Cb x Cs)
</pre>
   <p></p>
   <div class="figure">
     <img alt="example of screen blending" src="examples/screen.png"> 
    <p class="caption"></p>
   </div>
   <h4 class="heading settled" data-level="10.1.4" id="blendingoverlay"><span class="secno">10.1.4. </span><span class="content"><dfn class="dfn-paneled css" data-dfn-for="<blend-mode>" data-dfn-type="value" data-export id="valdef-blend-mode-overlay">overlay</dfn> blend mode</span><a class="self-link" href="#blendingoverlay"></a></h4>
   <p>Multiplies or screens the colors, depending on the <a data-link-type="dfn" href="#backdrop" id="ref-for-backdrop①⑤">backdrop</a> color value.</p>
   <p>Source colors overlay the <a data-link-type="dfn" href="#backdrop" id="ref-for-backdrop①⑥">backdrop</a> while preserving its highlights and shadows. The <span id="ref-for-backdrop①⑦">backdrop</span> color is not replaced but is mixed with the source color to reflect the lightness or darkness of the <span id="ref-for-backdrop①⑧">backdrop</span>.</p>
<pre>B(Cb, Cs) = HardLight(Cs, Cb)
</pre>
   <p>Overlay is the inverse of the <a class="css" data-link-type="value" href="#valdef-blend-mode-hard-light" id="ref-for-valdef-blend-mode-hard-light①">hard-light</a> blend mode. See the definition of <span id="ref-for-valdef-blend-mode-hard-light②">hard-light</span> for the formula.</p>
   <div class="figure">
     <img alt="example of overlay blending" src="examples/overlay.png"> 
    <p class="caption"></p>
   </div>
   <h4 class="heading settled" data-level="10.1.5" id="blendingdarken"><span class="secno">10.1.5. </span><span class="content"><dfn class="dfn-paneled css" data-dfn-for="<blend-mode>" data-dfn-type="value" data-export id="valdef-blend-mode-darken">darken</dfn> blend mode</span><a class="self-link" href="#blendingdarken"></a></h4>
   <p>Selects the darker of the <a data-link-type="dfn" href="#backdrop" id="ref-for-backdrop①⑨">backdrop</a> and source colors.</p>
   <p>The <a data-link-type="dfn" href="#backdrop" id="ref-for-backdrop②⓪">backdrop</a> is replaced with the source where the source is darker; otherwise, it is left unchanged.</p>
<pre>B(Cb, Cs) = min(Cb, Cs)
</pre>
   <div class="figure">
     <img alt="example of darken blending" src="examples/darken.png"> 
    <p class="caption"></p>
   </div>
   <h4 class="heading settled" data-level="10.1.6" id="blendinglighten"><span class="secno">10.1.6. </span><span class="content"><dfn class="dfn-paneled css" data-dfn-for="<blend-mode>" data-dfn-type="value" data-export id="valdef-blend-mode-lighten">lighten</dfn> blend mode</span><a class="self-link" href="#blendinglighten"></a></h4>
   <p>Selects the lighter of the <a data-link-type="dfn" href="#backdrop" id="ref-for-backdrop②①">backdrop</a> and source colors.</p>
   <p>The <a data-link-type="dfn" href="#backdrop" id="ref-for-backdrop②②">backdrop</a> is replaced with the source where the source is lighter; otherwise, it is left unchanged.</p>
<pre>B(Cb, Cs) = max(Cb, Cs)
</pre>
   <p class="note" role="note"><span>Note:</span> The result must be rounded down if it exceeds the range.</p>
   <div class="figure">
     <img alt="example of lighten blending" src="examples/lighten.png"> 
    <p class="caption"></p>
   </div>
   <h4 class="heading settled" data-level="10.1.7" id="blendingcolordodge"><span class="secno">10.1.7. </span><span class="content"><dfn class="dfn-paneled css" data-dfn-for="<blend-mode>" data-dfn-type="value" data-export id="valdef-blend-mode-color-dodge">color-dodge</dfn> blend mode</span><a class="self-link" href="#blendingcolordodge"></a></h4>
   <p>Brightens the <a data-link-type="dfn" href="#backdrop" id="ref-for-backdrop②③">backdrop</a> color to reflect the source color. Painting with black produces no changes.</p>
<pre>if(Cb == 0)
    B(Cb, Cs) = 0
else if(Cs == 1)
    B(Cb, Cs) = 1
else
    B(Cb, Cs) = min(1, Cb / (1 - Cs))
</pre>
   <div class="figure">
     <img alt="example of color dodge blending" src="examples/colordodge.png"> 
    <p class="caption"></p>
   </div>
   <h4 class="heading settled" data-level="10.1.8" id="blendingcolorburn"><span class="secno">10.1.8. </span><span class="content"><dfn class="dfn-paneled css" data-dfn-for="<blend-mode>" data-dfn-type="value" data-export id="valdef-blend-mode-color-burn">color-burn</dfn> blend mode</span><a class="self-link" href="#blendingcolorburn"></a></h4>
   <p>Darkens the <a data-link-type="dfn" href="#backdrop" id="ref-for-backdrop②④">backdrop</a> color to reflect the source color. Painting with white produces no change.</p>
<pre>if(Cb == 1)
    B(Cb, Cs) = 1
else if(Cs == 0)
    B(Cb, Cs) = 0
else
    B(Cb, Cs) = 1 - min(1, (1 - Cb) / Cs)
</pre>
   <div class="figure">
     <img alt="example of color burn blending" src="examples/colorburn.png"> 
    <p class="caption"></p>
   </div>
   <h4 class="heading settled" data-level="10.1.9" id="blendinghardlight"><span class="secno">10.1.9. </span><span class="content"><dfn class="dfn-paneled css" data-dfn-for="<blend-mode>" data-dfn-type="value" data-export id="valdef-blend-mode-hard-light">hard-light</dfn> blend mode</span><a class="self-link" href="#blendinghardlight"></a></h4>
   <p>Multiplies or screens the colors, depending on the source color value. The effect is similar to shining a harsh spotlight on the <a data-link-type="dfn" href="#backdrop" id="ref-for-backdrop②⑤">backdrop</a>.</p>
<pre>if(Cs &lt;= 0.5)
    B(Cb, Cs) = Multiply(Cb, 2 x Cs)
else
    B(Cb, Cs) = Screen(Cb, 2 x Cs -1)
</pre>
   <p>See the definition of <a class="css" data-link-type="value" href="#valdef-blend-mode-multiply" id="ref-for-valdef-blend-mode-multiply①">multiply</a> and <a class="css" data-link-type="value" href="#valdef-blend-mode-screen" id="ref-for-valdef-blend-mode-screen①">screen</a> for their formulas.</p>
   <div class="figure">
     <img alt="example of hard light blending" src="examples/hardlight.png"> 
    <p class="caption"></p>
   </div>
   <h4 class="heading settled" data-level="10.1.10" id="blendingsoftlight"><span class="secno">10.1.10. </span><span class="content"><dfn class="dfn-paneled css" data-dfn-for="<blend-mode>" data-dfn-type="value" data-export id="valdef-blend-mode-soft-light">soft-light</dfn> blend mode</span><a class="self-link" href="#blendingsoftlight"></a></h4>
   <p>Darkens or lightens the colors, depending on the source color value. The effect is similar to shining a diffused spotlight on the <a data-link-type="dfn" href="#backdrop" id="ref-for-backdrop②⑥">backdrop</a>.</p>
<pre>    if(Cs &lt;= 0.5)
        B(Cb, Cs) = Cb - (1 - 2 x Cs) x Cb x (1 - Cb)
    else
        B(Cb, Cs) = Cb + (2 x Cs - 1) x (D(Cb) - Cb)
with
    if(Cb &lt;= 0.25)
        D(Cb) = ((16 * Cb - 12) x Cb + 4) x Cb
    else
        D(Cb) = sqrt(Cb)
</pre>
   <div class="figure">
     <img alt="example of soft light blending" src="examples/softlight.png"> 
    <p class="caption"></p>
   </div>
   <h4 class="heading settled" data-level="10.1.11" id="blendingdifference"><span class="secno">10.1.11. </span><span class="content"><dfn class="dfn-paneled css" data-dfn-for="<blend-mode>" data-dfn-type="value" data-export id="valdef-blend-mode-difference">difference</dfn> blend mode</span><a class="self-link" href="#blendingdifference"></a></h4>
   <p>Subtracts the darker of the two constituent colors from the lighter color.</p>
   <p>Painting with white inverts the <a data-link-type="dfn" href="#backdrop" id="ref-for-backdrop②⑦">backdrop</a> color; painting with black produces no change.</p>
<pre>B(Cb, Cs) = | Cb - Cs |
</pre>
   <p></p>
   <div class="figure">
     <img alt="example of difference blending" src="examples/difference.png"> 
    <p class="caption"></p>
   </div>
   <h4 class="heading settled" data-level="10.1.12" id="blendingexclusion"><span class="secno">10.1.12. </span><span class="content"><dfn class="dfn-paneled css" data-dfn-for="<blend-mode>" data-dfn-type="value" data-export id="valdef-blend-mode-exclusion">exclusion</dfn> blend mode</span><a class="self-link" href="#blendingexclusion"></a></h4>
   <p>Produces an effect similar to that of the Difference mode but lower in contrast. Painting with white inverts the <a data-link-type="dfn" href="#backdrop" id="ref-for-backdrop②⑧">backdrop</a> color; painting with black produces no change</p>
<pre>B(Cb, Cs) = Cb + Cs - 2 x Cb x Cs
</pre>
   <p></p>
   <div class="figure">
     <img alt="example of exclusion blending" src="examples/exclusion.png"> 
    <p class="caption"></p>
   </div>
   <h3 class="heading settled" data-level="10.2" id="blendingnonseparable"><span class="secno">10.2. </span><span class="content">Non-separable blend modes</span><a class="self-link" href="#blendingnonseparable"></a></h3>
   <p>Nonseparable blend modes consider all color components in combination as opposed to the separable ones that look at each component individually.
All of these blend modes conceptually entail the following steps:</p>
   <ol>
    <li>Convert the <a data-link-type="dfn" href="#backdrop" id="ref-for-backdrop②⑨">backdrop</a> and source colors from the blending color space to an intermediate hue-saturation-luminosity representation.
    <li>Create a new color from some combination of hue, saturation, and luminosity components selected from the <a data-link-type="dfn" href="#backdrop" id="ref-for-backdrop③⓪">backdrop</a> and source colors.
    <li>Convert the result back to the original color space.
   </ol>
   <p>The nonseparable blend mode formulas make use of several auxiliary functions:</p>
<pre>    Lum(C) = 0.3 x Cred + 0.59 x Cgreen + 0.11 x Cblue

    ClipColor(C)
        L = Lum(C)
        n = min(Cred, Cgreen, Cblue)
        x = max(Cred, Cgreen, Cblue)
        if(n &lt; 0)
            C = L + (((C - L) × L) / (L - n))

        if(x > 1)
            C = L + (((C - L) × (1 - L)) / (x - L))

        return C

    SetLum(C, l)
        d = l - Lum(C)
        Cred = Cred + d
        Cgreen = Cgreen + d
        Cblue = Cblue + d
        return ClipColor(C)

    Sat(C) = max(Cred, Cgreen, Cblue) - min(Cred, Cgreen, Cblue)

The subscripts min, mid, and max in the next function refer to the color
components having the minimum, middle, and maximum values upon entry to the function.

    SetSat(C, s)
        if(Cmax > Cmin)
            Cmid = (((Cmid - Cmin) x s) / (Cmax - Cmin))
            Cmax = s
        else
            Cmid = Cmax = 0
        Cmin = 0
        return C;
</pre>
   <h4 class="heading settled" data-level="10.2.1" id="blendinghue"><span class="secno">10.2.1. </span><span class="content"><dfn class="dfn-paneled css" data-dfn-for="<blend-mode>" data-dfn-type="value" data-export id="valdef-blend-mode-hue">hue</dfn> blend mode</span><a class="self-link" href="#blendinghue"></a></h4>
   <p>Creates a color with the hue of the source color and the saturation and luminosity of the <a data-link-type="dfn" href="#backdrop" id="ref-for-backdrop③①">backdrop</a> color.</p>
<pre>B(Cb, Cs) = SetLum(SetSat(Cs, Sat(Cb)), Lum(Cb))
</pre>
   <div class="figure">
     <img alt="example of hue blending" src="examples/hue.png"> 
    <p class="caption"></p>
   </div>
   <h4 class="heading settled" data-level="10.2.2" id="blendingsaturation"><span class="secno">10.2.2. </span><span class="content"><dfn class="dfn-paneled css" data-dfn-for="<blend-mode>" data-dfn-type="value" data-export id="valdef-blend-mode-saturation">saturation</dfn> blend mode</span><a class="self-link" href="#blendingsaturation"></a></h4>
   <p>Creates a color with the saturation of the source color and the hue and luminosity of the <a data-link-type="dfn" href="#backdrop" id="ref-for-backdrop③②">backdrop</a> color. Painting with this mode in an area of the <span id="ref-for-backdrop③③">backdrop</span> that is a pure gray (no saturation) produces no change.</p>
<pre>B(Cb, Cs) = SetLum(SetSat(Cb, Sat(Cs)), Lum(Cb))
</pre>
   <div class="figure">
     <img alt="example of saturation blending" src="examples/saturation.png"> 
    <p class="caption"></p>
   </div>
   <h4 class="heading settled" data-level="10.2.3" id="blendingcolor"><span class="secno">10.2.3. </span><span class="content"><dfn class="dfn-paneled css" data-dfn-for="<blend-mode>" data-dfn-type="value" data-export id="valdef-blend-mode-color">color</dfn> blend mode</span><a class="self-link" href="#blendingcolor"></a></h4>
   <p>Creates a color with the hue and saturation of the source color and the luminosity of the <a data-link-type="dfn" href="#backdrop" id="ref-for-backdrop③④">backdrop</a> color. This preserves the gray levels of the <span id="ref-for-backdrop③⑤">backdrop</span> and is useful for coloring monochrome images or tinting color images.</p>
<pre>B(Cb, Cs) = SetLum(Cs, Lum(Cb))
</pre>
   <div class="figure">
     <img alt="example of color blending" src="examples/color.png"> 
    <p class="caption"></p>
   </div>
   <h4 class="heading settled" data-level="10.2.4" id="blendingluminosity"><span class="secno">10.2.4. </span><span class="content"><dfn class="dfn-paneled css" data-dfn-for="<blend-mode>" data-dfn-type="value" data-export id="valdef-blend-mode-luminosity">luminosity</dfn> blend mode</span><a class="self-link" href="#blendingluminosity"></a></h4>
   <p>Creates a color with the luminosity of the source color and the hue and saturation of the <a data-link-type="dfn" href="#backdrop" id="ref-for-backdrop③⑥">backdrop</a> color. This produces an inverse effect to that of the Color mode.</p>
<pre>B(Cb, Cs) = SetLum(Cb, Lum(Cs))
</pre>
   <div class="figure">
     <img alt="example of luminosity blending" src="examples/luminosity.png"> 
    <p class="caption"></p>
   </div>
   <h3 class="heading settled" data-level="10.3" id="isolationblending"><span class="secno">10.3. </span><span class="content">Effect of group isolation on blending</span><a class="self-link" href="#isolationblending"></a></h3>
   <p class="note" role="note"><span>Note:</span> In the following example, the elements used to construct the paper airplane are within a group. Each of these elements has their blend mode set to multiply.</p>
   <div class="example" id="example-63d91a15">
    <a class="self-link" href="#example-63d91a15"></a> The airplane on the left is a normal group, the airplane on the right is an <a href="#isolatedgroups">isolated group</a>.
    <p></p>
    <p> In the isolated group, the elements within the group are composited onto an empty initial backdrop, this stops the elements within the group multiplying with the backdrop.
In the normal group, the elements within the group are composited onto the initial backdrop containing the land and sky. Therefore the elements of the airplane multiply with the land and sky.
In both instances, the result of the group composite is composited onto the land and sky using the normal mix-blend-mode (the default mix-blend-mode applied to the group). </p>
    <div class="figure">
      <img alt="example of isolated group blending" src="examples/isolate_blend_example.png"> 
     <p class="caption"></p>
    </div>
   </div>
   <h2 class="heading settled" data-level="11" id="security"><span class="secno">11. </span><span class="content">Security issues with compositing and blending</span><a class="self-link" href="#security"></a></h2>
   <p>It is important that the timing to the blending and compositing operations is independent of the source and destination pixel. Operations must be implemented in such a way that they always take the same amount of time regardless of the pixel values.</p>
   <p></p>
   <div class="note" role="note">
    <p> If this rule is not followed, an attacker could infer information and mount a timing attack. </p>
    <p>A timing attack is a method of obtaining information about content that
   is otherwise protected, based on studying the amount of time it takes for
   an operation to occur. If, for example, red pixels took longer to
   draw than green pixels, one might be able to reconstruct a rough image of
   the element being rendered, without ever having access to the content
   of the element.</p>
   </div>
   <h2 class="heading settled" data-level="12" id="changes"><span class="secno">12. </span><span class="content">Changes</span><a class="self-link" href="#changes"></a></h2>
   <p>The following changes were made relative to the <a href="https://www.w3.org/TR/2014/CR-compositing-1-20140220/"> Candidate Recommendation of 20 February 2014</a>:</p>
   <ul>
    <li>force isolation of SVG images embedded as &lt;img> no longer at risk
    <li>removed destination as an option for <a class="production css" data-link-type="type" href="#compositemode" id="ref-for-compositemode②">&lt;composite-mode></a>
   </ul>
   <p>The following changes were made relative to the <a href="https://www.w3.org/TR/2013/WD-compositing-1-20131010/"> Last Call
Working draft of 7 January 2014</a>:</p>
   <ul>
    <li>unneeded normative and informative references were removed
   </ul>
   <p>The following changes were made relative to the <a href="https://www.w3.org/TR/2013/WD-compositing-1-20131010/"> Last Call
Working draft of 10 October 2013</a>:</p>
   <ul>
    <li>knockout was removed from the non-normative section
    <li>removed paragraph on SVG from simple alpha compositing
    <li>updated abstract to include CSS and clarify intent
    <li>removed clip-to-self and its references
    <li>Changed section 5-10 to be normative + clarified notes/examples in those sections
   </ul>
   <p>The following changes were made relative to the <a href="https://www.w3.org/TR/2013/WD-compositing-1-20130625/">Working
Draft of 2013-06-25</a>:</p>
   <ul>
    <li>clipping was removed as one of the operators that
 creates an isolated group in SVG 
    <li>background-blend-mode was changed so it matches
 repeating behavior of other background syntaxes. 
    <li>The mix-composite property was removed 
    <li>all open issues were resolved 
   </ul>
  </main>
  <h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> Conformance</span><a class="self-link" href="#conformance"></a></h2>
  <h3 class="heading settled" id="document-conventions"><span class="content"> Document conventions</span><a class="self-link" href="#document-conventions"></a></h3>
  <p>Conformance requirements are expressed with a combination of
	descriptive assertions and RFC 2119 terminology. The key words “MUST”,
	“MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
	“RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
	document are to be interpreted as described in RFC 2119.
	However, for readability, these words do not appear in all uppercase
	letters in this specification. </p>
  <p>All of the text of this specification is normative except sections
	explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a> </p>
  <p>Examples in this specification are introduced with the words “for example”
	or are set apart from the normative text with <code>class="example"</code>,
	like this: </p>
  <div class="example" id="example-ae2b6bc0">
   <a class="self-link" href="#example-ae2b6bc0"></a> 
   <p>This is an example of an informative example. </p>
  </div>
  <p>Informative notes begin with the word “Note” and are set apart from the
	normative text with <code>class="note"</code>, like this: </p>
  <p class="note" role="note">Note, this is an informative note. </p>
  <p>Advisements are normative sections styled to evoke special attention and are
	set apart from other normative text with <code>&lt;strong class="advisement"></code>, like
	this: <strong class="advisement"> UAs MUST provide an accessible alternative. </strong> </p>
  <h3 class="heading settled" id="conform-classes"><span class="content"> Conformance classes</span><a class="self-link" href="#conform-classes"></a></h3>
  <p>Conformance to this specification
	is defined for three conformance classes: </p>
  <dl>
   <dt>style sheet 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#style-sheet">CSS
			style sheet</a>. 
   <dt>renderer 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#user-agent">UA</a> that interprets the semantics of a style sheet and renders
			documents that use them. 
   <dt>authoring tool 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#user-agent">UA</a> that writes a style sheet. 
  </dl>
  <p>A style sheet is conformant to this specification
	if all of its statements that use syntax defined in this module are valid
	according to the generic CSS grammar and the individual grammars of each
	feature defined in this module. </p>
  <p>A renderer is conformant to this specification
	if, in addition to interpreting the style sheet as defined by the
	appropriate specifications, it supports all the features defined
	by this specification by parsing them correctly
	and rendering the document accordingly. However, the inability of a
	UA to correctly render a document due to limitations of the device
	does not make the UA non-conformant. (For example, a UA is not
	required to render color on a monochrome monitor.) </p>
  <p>An authoring tool is conformant to this specification
	if it writes style sheets that are syntactically correct according to the
	generic CSS grammar and the individual grammars of each feature in
	this module, and meet all other conformance requirements of style sheets
	as described in this module. </p>
  <h3 class="heading settled" id="conform-responsible"><span class="content"> Requirements for Responsible Implementation of CSS</span><a class="self-link" href="#conform-responsible"></a></h3>
  <p>The following sections define several conformance requirements
		for implementing CSS responsibly,
		in a way that promotes interoperability in the present and future. </p>
  <h4 class="heading settled" id="conform-partial"><span class="content"> Partial Implementations</span><a class="self-link" href="#conform-partial"></a></h4>
  <p>So that authors can exploit the forward-compatible parsing rules to assign fallback values, <strong>CSS renderers <em>must</em> treat as invalid
		(and <a href="http://www.w3.org/TR/CSS2/conform.html#ignore">ignore as appropriate</a>)
		any at-rules, properties, property values, keywords, and other syntactic constructs
		for which they have no usable level of support</strong>.
		In particular, user agents <em>must not</em> selectively ignore
		unsupported property values and honor supported values in a single multi-value property declaration:
		if any value is considered invalid (as unsupported values must be),
		CSS requires that the entire declaration be ignored. </p>
  <h4 class="heading settled" id="conform-future-proofing"><span class="content"> Implementations of Unstable and Proprietary Features</span><a class="self-link" href="#conform-future-proofing"></a></h4>
  <p>To avoid clashes with future stable CSS features,
		the CSSWG recommends <a href="http://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="http://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="http://www.w3.org/TR/CSS/#proprietary-extension">proprietary extensions</a> to CSS. </p>
  <h4 class="heading settled" id="conform-testing"><span class="content"> Implementations of CR-level Features</span><a class="self-link" href="#conform-testing"></a></h4>
  <p>Once a specification reaches the Candidate Recommendation stage,
		implementers should release an <a data-link-type="dfn" href="http://www.w3.org/TR/CSS/#vendor-prefix">unprefixed</a> implementation
		of any CR-level feature they can demonstrate
		to be correctly implemented according to spec,
		and should avoid exposing a prefixed variant of that feature. </p>
  <p>To establish and maintain the interoperability of CSS across
		implementations, the CSS Working Group requests that non-experimental
		CSS renderers submit an implementation report (and, if necessary, the
		testcases used for that implementation report) to the W3C before
		releasing an unprefixed implementation of any CSS features. Testcases
		submitted to W3C are subject to review and correction by the CSS
		Working Group. </p>
  <p>
   Further information on submitting testcases and implementation reports
		can be found from on the CSS Working Group’s website at <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
		Questions should be directed to the <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> mailing list. 
<script src="https://www.w3.org/scripts/TR/2016/fixup.js"></script>
  </p>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li><a href="#backdrop">backdrop</a><span>, in §7</span>
   <li><a href="#propdef-background-blend-mode">background-blend-mode</a><span>, in §3.4.3</span>
   <li><a href="#ltblendmodegt">&lt;blend-mode></a><span>, in §3.4.1</span>
   <li><a href="#valdef-blend-mode-color">color</a><span>, in §10.2.3</span>
   <li><a href="#valdef-blend-mode-color-burn">color-burn</a><span>, in §10.1.8</span>
   <li><a href="#valdef-blend-mode-color-dodge">color-dodge</a><span>, in §10.1.7</span>
   <li><a href="#compositemode">&lt;composite-mode></a><span>, in §4</span>
   <li><a href="#valdef-blend-mode-darken">darken</a><span>, in §10.1.5</span>
   <li><a href="#valdef-blend-mode-difference">difference</a><span>, in §10.1.11</span>
   <li><a href="#valdef-blend-mode-exclusion">exclusion</a><span>, in §10.1.12</span>
   <li><a href="#valdef-blend-mode-hard-light">hard-light</a><span>, in §10.1.9</span>
   <li><a href="#valdef-blend-mode-hue">hue</a><span>, in §10.2.1</span>
   <li><a href="#propdef-isolation">isolation</a><span>, in §3.4.2</span>
   <li><a href="#isolated-propid">&lt;isolation-mode></a><span>, in §3.4.2</span>
   <li><a href="#valdef-blend-mode-lighten">lighten</a><span>, in §10.1.6</span>
   <li><a href="#valdef-blend-mode-luminosity">luminosity</a><span>, in §10.2.4</span>
   <li><a href="#propdef-mix-blend-mode">mix-blend-mode</a><span>, in §3.4.1</span>
   <li><a href="#valdef-blend-mode-multiply">multiply</a><span>, in §10.1.2</span>
   <li><a href="#valdef-blend-mode-normal">normal</a><span>, in §10.1.1</span>
   <li><a href="#valdef-blend-mode-overlay">overlay</a><span>, in §10.1.4</span>
   <li><a href="#valdef-blend-mode-saturation">saturation</a><span>, in §10.2.2</span>
   <li><a href="#valdef-blend-mode-screen">screen</a><span>, in §10.1.3</span>
   <li><a href="#valdef-blend-mode-soft-light">soft-light</a><span>, in §10.1.10</span>
  </ul>
  <aside class="dfn-panel" data-for="term-for-propdef-opacity">
   <a href="https://drafts.csswg.org/css-color-4/#propdef-opacity">https://drafts.csswg.org/css-color-4/#propdef-opacity</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-opacity">3.4.1. The mix-blend-mode property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-mult-comma">
   <a href="https://drafts.csswg.org/css-values-4/#mult-comma">https://drafts.csswg.org/css-values-4/#mult-comma</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mult-comma">3.4.3. The background-blend-mode property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-comb-one">
   <a href="https://drafts.csswg.org/css-values-4/#comb-one">https://drafts.csswg.org/css-values-4/#comb-one</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-comb-one">3.4.1. The mix-blend-mode property</a> <a href="#ref-for-comb-one①">(2)</a> <a href="#ref-for-comb-one②">(3)</a> <a href="#ref-for-comb-one③">(4)</a> <a href="#ref-for-comb-one④">(5)</a> <a href="#ref-for-comb-one⑤">(6)</a> <a href="#ref-for-comb-one⑥">(7)</a> <a href="#ref-for-comb-one⑦">(8)</a> <a href="#ref-for-comb-one⑧">(9)</a> <a href="#ref-for-comb-one⑨">(10)</a> <a href="#ref-for-comb-one①⓪">(11)</a> <a href="#ref-for-comb-one①①">(12)</a> <a href="#ref-for-comb-one①②">(13)</a> <a href="#ref-for-comb-one①③">(14)</a> <a href="#ref-for-comb-one①④">(15)</a>
    <li><a href="#ref-for-comb-one①⑤">3.4.2. The isolation property</a>
    <li><a href="#ref-for-comb-one①⑥">4. Specifying Compositing and Blending in Canvas 2D</a> <a href="#ref-for-comb-one①⑦">(2)</a> <a href="#ref-for-comb-one①⑧">(3)</a> <a href="#ref-for-comb-one①⑨">(4)</a> <a href="#ref-for-comb-one②⓪">(5)</a> <a href="#ref-for-comb-one②①">(6)</a> <a href="#ref-for-comb-one②②">(7)</a> <a href="#ref-for-comb-one②③">(8)</a> <a href="#ref-for-comb-one②④">(9)</a> <a href="#ref-for-comb-one②⑤">(10)</a> <a href="#ref-for-comb-one②⑥">(11)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-background">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background">https://drafts.csswg.org/css-backgrounds-3/#propdef-background</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-background">3.4.3. The background-blend-mode property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-background-image">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-image">https://drafts.csswg.org/css-backgrounds-3/#propdef-background-image</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-background-image">3.4.3. The background-blend-mode property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-body-element">
   <a href="https://html.spec.whatwg.org/multipage/sections.html#the-body-element">https://html.spec.whatwg.org/multipage/sections.html#the-body-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-body-element">3.4.3. The background-blend-mode property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-context-2d-globalcompositeoperation">
   <a href="https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-globalcompositeoperation">https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-globalcompositeoperation</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-context-2d-globalcompositeoperation①">2.1. Module interactions</a>
    <li><a href="#ref-for-dom-context-2d-globalcompositeoperation②">4. Specifying Compositing and Blending in Canvas 2D</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-img-element">
   <a href="https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element">https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-img-element">3.4.2. The isolation property</a> <a href="#ref-for-the-img-element①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-MaskProperty">
   <a href="https://www.w3.org/TR/SVG11/masking.html#MaskProperty">https://www.w3.org/TR/SVG11/masking.html#MaskProperty</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-MaskProperty">3.4.2. The isolation property</a>
   </ul>
  </aside>
  <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
  <ul class="index">
   <li>
    <a data-link-type="biblio">[css-color-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-opacity" style="color:initial">opacity</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-values-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-mult-comma" style="color:initial">#</span>
     <li><span class="dfn-paneled" id="term-for-comb-one" style="color:initial">|</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS3BG]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-background" style="color:initial">background</span>
     <li><span class="dfn-paneled" id="term-for-propdef-background-image" style="color:initial">background-image</span>
    </ul>
   <li>
    <a data-link-type="biblio">[HTML]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-the-body-element" style="color:initial">body</span>
     <li><span class="dfn-paneled" id="term-for-dom-context-2d-globalcompositeoperation" style="color:initial">globalCompositeOperation</span>
     <li><span class="dfn-paneled" id="term-for-the-img-element" style="color:initial">img</span>
    </ul>
   <li>
    <a data-link-type="biblio">[SVG11]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-MaskProperty" style="color:initial">mask</span>
    </ul>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-css-values-4">[CSS-VALUES-4]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-4/">CSS Values and Units Module Level 4</a>. 31 January 2019. WD. URL: <a href="https://www.w3.org/TR/css-values-4/">https://www.w3.org/TR/css-values-4/</a>
   <dt id="biblio-css21">[CSS21]
   <dd>Bert Bos; et al. <a href="https://www.w3.org/TR/CSS2/">Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. REC. URL: <a href="https://www.w3.org/TR/CSS2/">https://www.w3.org/TR/CSS2/</a>
   <dt id="biblio-css3bg">[CSS3BG]
   <dd>Bert Bos; Elika Etemad; Brad Kemper. <a href="https://www.w3.org/TR/css-backgrounds-3/">CSS Backgrounds and Borders Module Level 3</a>. 17 October 2017. CR. URL: <a href="https://www.w3.org/TR/css-backgrounds-3/">https://www.w3.org/TR/css-backgrounds-3/</a>
   <dt id="biblio-css3color">[CSS3COLOR]
   <dd>Tantek Çelik; Chris Lilley; David Baron. <a href="https://www.w3.org/TR/css-color-3/">CSS Color Module Level 3</a>. 19 June 2018. REC. URL: <a href="https://www.w3.org/TR/css-color-3/">https://www.w3.org/TR/css-color-3/</a>
   <dt id="biblio-html">[HTML]
   <dd>Anne van Kesteren; et al. <a href="https://html.spec.whatwg.org/multipage/">HTML Standard</a>. Living Standard. URL: <a href="https://html.spec.whatwg.org/multipage/">https://html.spec.whatwg.org/multipage/</a>
   <dt id="biblio-rfc2119">[RFC2119]
   <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a>
   <dt id="biblio-svg11">[SVG11]
   <dd>Erik Dahlström; et al. <a href="https://www.w3.org/TR/SVG11/">Scalable Vector Graphics (SVG) 1.1 (Second Edition)</a>. 16 August 2011. REC. URL: <a href="https://www.w3.org/TR/SVG11/">https://www.w3.org/TR/SVG11/</a>
  </dl>
  <h3 class="no-num no-ref heading settled" id="informative"><span class="content">Informative References</span><a class="self-link" href="#informative"></a></h3>
  <dl>
   <dt id="biblio-css-color-4">[CSS-COLOR-4]
   <dd>Tab Atkins Jr.; Chris Lilley. <a href="https://www.w3.org/TR/css-color-4/">CSS Color Module Level 4</a>. 5 March 2019. WD. URL: <a href="https://www.w3.org/TR/css-color-4/">https://www.w3.org/TR/css-color-4/</a>
   <dt id="biblio-porterduff">[PORTERDUFF]
   <dd>Thomas Porter; Tom Duff. Compositing digital images. July 1984. 
  </dl>
  <h2 class="no-num no-ref heading settled" id="property-index"><span class="content">Property Index</span><a class="self-link" href="#property-index"></a></h2>
  <div class="big-element-wrapper">
   <table class="index">
    <thead>
     <tr>
      <th scope="col">Name
      <th scope="col">Value
      <th scope="col">Initial
      <th scope="col">Applies to
      <th scope="col">Inh.
      <th scope="col">%ages
      <th scope="col">Ani­mat­able
      <th scope="col">Canonical order
      <th scope="col">Com­puted value
      <th scope="col">Media
    <tbody>
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-background-blend-mode" id="ref-for-propdef-background-blend-mode⑤">background-blend-mode</a>
      <td>&lt;blend-mode>#
      <td>normal
      <td>All HTML elements
      <td>no
      <td>N/A
      <td>no
      <td>per grammar
      <td>as specified
      <td>visual
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-isolation" id="ref-for-propdef-isolation②">isolation</a>
      <td>&lt;isolation-mode>
      <td>auto
      <td>All elements. In SVG, it applies to container elements, graphics elements and graphics referencing elements. [SVG11]
      <td>no
      <td>N/A
      <td>no
      <td>per grammar
      <td>as specified
      <td>visual
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-mix-blend-mode" id="ref-for-propdef-mix-blend-mode①">mix-blend-mode</a>
      <td>&lt;blend-mode>
      <td>normal
      <td>All elements. In SVG, it applies to container elements, graphics elements and graphics referencing elements. [SVG11]
      <td>no
      <td>N/A
      <td>no
      <td>per grammar
      <td>as specified
      <td>visual
   </table>
  </div>
  <aside class="dfn-panel" data-for="propdef-mix-blend-mode">
   <b><a href="#propdef-mix-blend-mode">#propdef-mix-blend-mode</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-mix-blend-mode">3.4.1. The mix-blend-mode property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="ltblendmodegt">
   <b><a href="#ltblendmodegt">#ltblendmodegt</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-ltblendmodegt">3.4.1. The mix-blend-mode property</a> <a href="#ref-for-ltblendmodegt①">(2)</a>
    <li><a href="#ref-for-ltblendmodegt②">3.4.3. The background-blend-mode property</a>
    <li><a href="#ref-for-ltblendmodegt③">4. Specifying Compositing and Blending in Canvas 2D</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-isolation">
   <b><a href="#propdef-isolation">#propdef-isolation</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-isolation">3.4.2. The isolation property</a> <a href="#ref-for-propdef-isolation①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="isolated-propid">
   <b><a href="#isolated-propid">#isolated-propid</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-isolated-propid">3.4.2. The isolation property</a> <a href="#ref-for-isolated-propid①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-background-blend-mode">
   <b><a href="#propdef-background-blend-mode">#propdef-background-blend-mode</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-background-blend-mode">2.1. Module interactions</a>
    <li><a href="#ref-for-propdef-background-blend-mode①">3.4.3. The background-blend-mode property</a> <a href="#ref-for-propdef-background-blend-mode②">(2)</a> <a href="#ref-for-propdef-background-blend-mode③">(3)</a> <a href="#ref-for-propdef-background-blend-mode④">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="compositemode">
   <b><a href="#compositemode">#compositemode</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-compositemode">4. Specifying Compositing and Blending in Canvas 2D</a> <a href="#ref-for-compositemode①">(2)</a>
    <li><a href="#ref-for-compositemode②">12. Changes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="backdrop">
   <b><a href="#backdrop">#backdrop</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-backdrop①">5. Introduction to compositing</a> <a href="#ref-for-backdrop②">(2)</a>
    <li><a href="#ref-for-backdrop③">5.1. Simple alpha compositing</a> <a href="#ref-for-backdrop④">(2)</a> <a href="#ref-for-backdrop⑤">(3)</a>
    <li><a href="#ref-for-backdrop⑥">5.1.1. Examples of simple alpha compositing</a> <a href="#ref-for-backdrop⑦">(2)</a>
    <li><a href="#ref-for-backdrop⑧">10. Blending</a> <a href="#ref-for-backdrop⑨">(2)</a> <a href="#ref-for-backdrop①⓪">(3)</a> <a href="#ref-for-backdrop①①">(4)</a> <a href="#ref-for-backdrop①②">(5)</a>
    <li><a href="#ref-for-backdrop①③">10.1. Separable blend modes</a>
    <li><a href="#ref-for-backdrop①④">10.1.3. screen blend mode</a>
    <li><a href="#ref-for-backdrop①⑤">10.1.4. overlay blend mode</a> <a href="#ref-for-backdrop①⑥">(2)</a> <a href="#ref-for-backdrop①⑦">(3)</a> <a href="#ref-for-backdrop①⑧">(4)</a>
    <li><a href="#ref-for-backdrop①⑨">10.1.5. darken blend mode</a> <a href="#ref-for-backdrop②⓪">(2)</a>
    <li><a href="#ref-for-backdrop②①">10.1.6. lighten blend mode</a> <a href="#ref-for-backdrop②②">(2)</a>
    <li><a href="#ref-for-backdrop②③">10.1.7. color-dodge blend mode</a>
    <li><a href="#ref-for-backdrop②④">10.1.8. color-burn blend mode</a>
    <li><a href="#ref-for-backdrop②⑤">10.1.9. hard-light blend mode</a>
    <li><a href="#ref-for-backdrop②⑥">10.1.10. soft-light blend mode</a>
    <li><a href="#ref-for-backdrop②⑦">10.1.11. difference blend mode</a>
    <li><a href="#ref-for-backdrop②⑧">10.1.12. exclusion blend mode</a>
    <li><a href="#ref-for-backdrop②⑨">10.2. Non-separable blend modes</a> <a href="#ref-for-backdrop③⓪">(2)</a>
    <li><a href="#ref-for-backdrop③①">10.2.1. hue blend mode</a>
    <li><a href="#ref-for-backdrop③②">10.2.2. saturation blend mode</a> <a href="#ref-for-backdrop③③">(2)</a>
    <li><a href="#ref-for-backdrop③④">10.2.3. color blend mode</a> <a href="#ref-for-backdrop③⑤">(2)</a>
    <li><a href="#ref-for-backdrop③⑥">10.2.4. luminosity blend mode</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-blend-mode-normal">
   <b><a href="#valdef-blend-mode-normal">#valdef-blend-mode-normal</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-blend-mode-normal">3.4.1. The mix-blend-mode property</a> <a href="#ref-for-valdef-blend-mode-normal①">(2)</a>
    <li><a href="#ref-for-valdef-blend-mode-normal②">8.1. Group invariance</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-blend-mode-multiply">
   <b><a href="#valdef-blend-mode-multiply">#valdef-blend-mode-multiply</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-blend-mode-multiply">3.4.1. The mix-blend-mode property</a>
    <li><a href="#ref-for-valdef-blend-mode-multiply①">10.1.9. hard-light blend mode</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-blend-mode-screen">
   <b><a href="#valdef-blend-mode-screen">#valdef-blend-mode-screen</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-blend-mode-screen">3.4.1. The mix-blend-mode property</a>
    <li><a href="#ref-for-valdef-blend-mode-screen①">10.1.9. hard-light blend mode</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-blend-mode-overlay">
   <b><a href="#valdef-blend-mode-overlay">#valdef-blend-mode-overlay</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-blend-mode-overlay">3.4.1. The mix-blend-mode property</a> <a href="#ref-for-valdef-blend-mode-overlay①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-blend-mode-darken">
   <b><a href="#valdef-blend-mode-darken">#valdef-blend-mode-darken</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-blend-mode-darken">3.4.1. The mix-blend-mode property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-blend-mode-lighten">
   <b><a href="#valdef-blend-mode-lighten">#valdef-blend-mode-lighten</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-blend-mode-lighten">3.4.1. The mix-blend-mode property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-blend-mode-color-dodge">
   <b><a href="#valdef-blend-mode-color-dodge">#valdef-blend-mode-color-dodge</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-blend-mode-color-dodge">3.4.1. The mix-blend-mode property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-blend-mode-color-burn">
   <b><a href="#valdef-blend-mode-color-burn">#valdef-blend-mode-color-burn</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-blend-mode-color-burn">3.4.1. The mix-blend-mode property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-blend-mode-hard-light">
   <b><a href="#valdef-blend-mode-hard-light">#valdef-blend-mode-hard-light</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-blend-mode-hard-light">3.4.1. The mix-blend-mode property</a>
    <li><a href="#ref-for-valdef-blend-mode-hard-light①">10.1.4. overlay blend mode</a> <a href="#ref-for-valdef-blend-mode-hard-light②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-blend-mode-soft-light">
   <b><a href="#valdef-blend-mode-soft-light">#valdef-blend-mode-soft-light</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-blend-mode-soft-light">3.4.1. The mix-blend-mode property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-blend-mode-difference">
   <b><a href="#valdef-blend-mode-difference">#valdef-blend-mode-difference</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-blend-mode-difference">3.4.1. The mix-blend-mode property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-blend-mode-exclusion">
   <b><a href="#valdef-blend-mode-exclusion">#valdef-blend-mode-exclusion</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-blend-mode-exclusion">3.4.1. The mix-blend-mode property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-blend-mode-hue">
   <b><a href="#valdef-blend-mode-hue">#valdef-blend-mode-hue</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-blend-mode-hue">3.4.1. The mix-blend-mode property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-blend-mode-saturation">
   <b><a href="#valdef-blend-mode-saturation">#valdef-blend-mode-saturation</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-blend-mode-saturation">3.4.1. The mix-blend-mode property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-blend-mode-color">
   <b><a href="#valdef-blend-mode-color">#valdef-blend-mode-color</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-blend-mode-color">3.4.1. The mix-blend-mode property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-blend-mode-luminosity">
   <b><a href="#valdef-blend-mode-luminosity">#valdef-blend-mode-luminosity</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-blend-mode-luminosity">3.4.1. The mix-blend-mode property</a>
   </ul>
  </aside>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>